Sass教程：简单⼊门、快速上⼿
Markdown
[toc]
前⾔
本⽂所有的演⽰都是基于Win10操作系统。
关于Sass
1.定义
Sass的学名叫“CSS预处理器”，就是在CSS的基础上，引⼊了变量、嵌套、mixin（混合）、运算以及函数等功能，增加了代码的灵活性，可以让我们以更少的代码实现同样的效果，⽽且代码的整洁度、可读性更强。
⽽且Sass算是CSS的超集，它100%兼容CSS的语法，所有在 CSS 中正常⼯作的代码也能在 SCSS 中正常⼯作。换个说法也就是：如果你喜欢，可以在Sass⽂件中完全以CSS的语法来写代码，它也是完全⽀持的。
⼤体来说，使⽤Sass分3步：
1. 安装Sass；
2. 编译Sass⽂件成CSS⽂件；
3. 在项⽬中引⽤CSS⽂件的路径；
2.⽂件格式
Sass有两种后缀名⽂件：.sass和.scss。在同⼀个项⽬中，两种格式⽂件可以共存（不建议，最好统⼀为⼀种格式），但⼆者有各⾃的特点：.sass后缀的⽂件
使⽤类Ruby的语法，格式为空格缩进式，没有花括号，靠换⾏区分不同属性，格式要求⽐较严格。
css变量
.scss后缀的⽂件
是Sass3引⼊的新语法，基本写法与CSS⼤致相同，所以对于专门做前端的同学来说，.scss后缀的⽂件是不⼆选择。
有⼀点需要注意，虽然是CSS的超级，但如果你直接把CSS⽂件的后缀改为.scss，浏览器是不能识别的。这也就是“预编译”的意思，Sass⽂件还是需要先编译为CSS⽂件才能正常被浏览器识别。
安装
像上⾯提到的，通过给命令--style后⾯添加不同的参数，会⽣成不同样式的css代码，这其实没有太多好说，但⼤家有没有想过⼀个问题，Sass⽂件中的注释会被编译到CSS⽂件中么？这就要看--style命令后⾯是什么参数了，默认是nested（嵌套式），⽽expanded（展开式）是CSS代码常见的格式。
下⾯做简单展⽰，建议⼤家亲⾃下⼿查看。
Markdown
Sass中的注释有3种：
1. //我是单⾏注释
不会出现在编译之后任何格式的CSS⽂件中。
2. /*我是多⾏注释*/
只会出现在编译之后代码格式为expanded的CSS⽂件中。
3. /*!我是强制注释*/
会出现在任何代码格式的CSS⽂件中。
常⽤基本语法
1.变量
变量是Sass中最基本的语法。凡是css属性的标准值（⽐如说1px或者bold）可存在的地⽅，都可以替
换为变量。之后，如果你需要⼀个不同的值，只需要改变这个变量的值，则所有引⽤此变量的地⽅⽣成的值都会随之改变。
通过 $ 符号来定义，通过变量名称实现多处重复引⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。