前言
本文主要记录了如何在 VScode 中使用 Sass,以及Sass的基础语法,包括Sass的嵌套,标识符,以及两种形式的简单介绍。
Sass
Sass 是基于Ruby
语言开发而成的 CSS 扩展语言,是 CSS 预处理器;
Sass 提供了许多便利的写法,可以减少 CSS 代码的重复,节省开发时间。
在 VScode 中使用 Sass
Live Sass Compiler
在VScode中安装 Live Sass Compiler 插件,它可以帮助我们实时编译Sass代码,将其转化为CSS代码。
Sass初体验
在VScode中创建Sass文件,在Sass文件中可以正常编写CSS也不会报错。
点击VScode下方的Watch Sass,会编译Sass代码生成CSS代码。
Sass基础语法
Sass有两种形式分别以.scss
和.sass
为后缀;
先以.scss
为例,(最后再看.sass
)建立.scss
形式的Sass文件;
Sass嵌套
在Sass中可以将选择器层级进行嵌套,提高编码效率。
标识符
在层级嵌套中,使用 标识符& 代表父选择器。
.sass vs .scss
.sass
文件与.scss
文件类似,将.scss
文件中的{
、}
、 ;
去掉就变成了.sass
文件。
ps:Sass的两种形式其实是同一种东西,差别不大,可以按个人的使用习惯进行选择。
本文到此结束
如果大家还有什么其他想法,欢迎在评论区交流!