什么是Sass

• Sass是一种CSS预处理器（preprocessor）
• 借助Sass语法，我们能更加高效的为页面编写样式，
• Sass可以让我们使用一些CSS中没有的功能，比如说变量，嵌套，组合，继承等等
• 我们使用Sass语法来编写 .scss 文件，然后使用Sass预处理器将他们编译为.css文件，最后将编译产生的.css文件应用在工程中

为什么使用Sass

随着工程越来越打，css文件也会随之增大，维护难度增加，而且在css选择器中我们需要编写很多重复的代码
以下是普通css写法和sass写法的区别

css

sass

安装和使用Sass

详细内容可以参考sass官网

安装

独立安装和npm安装
推荐使用cnpm安装

编译.scss文件为sass文件

1.使用命令行实时渲染

<link>标签中无法直接使用.scss文件，需要编译为.css文件
使用时直接创建.scss文件，如：input.scss并在其中使用sass语法。
然后在命令行工具中输入

sass input.scss output.css

便会在同一文件夹目录下生成一个编译好的css文件
如果在命令行工具中输入

sass --watch input.scss:output.css

这样就可以完成scss到css的实时编译
当不在同一文件夹下时

sass --watch scss:dist/css
//表示的是在scss文件夹下的scss文件将被编译到dist文件夹下的css文件夹内

2.Live Sass编译器

VSCode扩展，可通过实时浏览器重新加载来帮助您实时将SASS / SCSS文件编译/转换为CSS文件。