前言

本文主要记录了如何在 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的两种形式其实是同一种东西，差别不大，可以按个人的使用习惯进行选择。

本文到此结束

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