SASS简介以及使用方式

Sass是一个CSS预处理器，也是一种CSS扩展语言。它可以帮助我们减少CSS重复的代码，节省开发时间。Sass完全兼容所有版本的CSS，并扩展了CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。Sass生成良好格式化的CSS代码，易于组织和维护。Sass文件的后缀为.scss。

使用Sass时，不是直接创建.css文件，而是创建一个.scss文件，按照Sass特定的语法格式来写样式。写完样式之后，再将.scss文件执行一次编译，生成.css文件。

在Sass中，允许使用变量，所有的变量以开头。例如：color: red; div { background: color; } 如果变量需要镶嵌在字符串中，就必须写在#{}中。例如：side: left; div { border-#{$side}-radius: 5px; }

Sass还允许在代码中使用计算功能。例如：div { margin: (14px/2); top: 40px + 50px; right: $var * 10%; }

此外，Sass还支持嵌套，使代码结构更加清晰，层级分明。例如：div h2 { color: color; } 可以写成：div { h2 { color: color; } } 属性嵌套时，border后面必须加: div { border: { color: red; } } 在嵌套的代码块中，可以使用&引用父元素。