如何在 VScode 中使用 Sass

时间:2022-09-30 07:20:42

前言

本文主要记录了如何在 VScode 中使用 Sass,以及Sass的基础语法,包括Sass的嵌套,标识符,以及两种形式的简单介绍。

Sass

Sass 是基于Ruby语言开发而成的 CSS 扩展语言,是 CSS 预处理器;

Sass 提供了许多便利的写法,可以减少 CSS 代码的重复,节省开发时间。

在 VScode 中使用 Sass

Live Sass Compiler

在VScode中安装 Live Sass Compiler 插件,它可以帮助我们实时编译Sass代码,将其转化为CSS代码。

如何在 VScode 中使用 Sass

Sass初体验

在VScode中创建Sass文件,在Sass文件中可以正常编写CSS也不会报错。

如何在 VScode 中使用 Sass

点击VScode下方的Watch Sass,会编译Sass代码生成CSS代码。 如何在 VScode 中使用 Sass如何在 VScode 中使用 Sass

Sass基础语法

Sass有两种形式分别以.scss.sass为后缀;

先以.scss为例,(最后再看.sass)建立.scss形式的Sass文件;

Sass嵌套

在Sass中可以将选择器层级进行嵌套,提高编码效率。 如何在 VScode 中使用 Sass

标识符

在层级嵌套中,使用 标识符& 代表父选择器。

如何在 VScode 中使用 Sass

.sass vs .scss

.sass文件与.scss文件类似,将.scss文件中的{}; 去掉就变成了.sass文件。

如何在 VScode 中使用 Sass

ps:Sass的两种形式其实是同一种东西,差别不大,可以按个人的使用习惯进行选择。

本文到此结束

如果大家还有什么其他想法,欢迎在评论区交流!