Sass预处理技术

1. 为什么会出现CSS预处理技术?

        css不是一种编程语言，仅仅只能用来编写网站样式，在web初期时，网站的搭建还比较基础，所需要的样式往往也比较简单，但是随着用户需求的增加以及网站技术的升级，css一成不变的写法也逐渐不再满足于项目，没有类似js这样的编程语言所有的变量、常量以及其他的编程语法，css的代码难免会显得臃肿以及难以维护，但是又没有css的替代品，于是CSS预处理器就作为css的扩展，出现在了前端技术中。

        Sass是一款强化CSS的辅助工具，它在CSS语法的基础上增加了变量(variables)、嵌套(nested rules)、混合(mixins)、导入(inline imports)等高级功能，这些拓展令CSS更加强大与优雅。使用Sass 以及Sass的样式库有助于更好地组织管理样式文件，以及更高效地开发项目。

                        

2. 特色功能：

• 完全兼容CSS3
•  在CSS基础上增加变量、嵌套(nesting)、混合(mixins)等功能
• 通过函数进行颜色值与属性值的运算
• 提供控制指令(control directives)等高级功能
• 自定义输出格式

3. 语法格式：

       1)、 Sass (Syntactically Awesome StyleSheets)，可翻译为"语法上很棒的样式表”，它有两种语法格式。首先是scss (Sassy cSS)——也是本文示例所使用的格式――这种格式仅在CSS3语法的基础上进行拓展，所有CSS3语法在SCSS中都是通用的，同时加入Sass的特色功能。此外，SCSS也支持大多数CSS hacks 写法以及浏览器前缀写法(vendor-specific syntax)，以及早期的IE滤镜写法。这种格式以 .scss 作为拓展名。

        英文网:  https://sass-lang.com

        中文网:  https://www.sass.hk

        2）、另一种也是最早的Sass语法格式，被称为缩进格式(Indented Sass)通常简称Sass"，是一种简化格式。它使用“缩进”代替“花括号”表示属性属于某个选择器，用“换行"代替“分号”分隔属性，很多人认为这样做比SCSS更容易阅读，书写也更快速。缩进格式也可以使用Sass的全部功能，只是与SCSS相比个别地方采取了不同的表达方式，具体请查看the indented syntax reference。这种格式以.sass作为拓展名。

        3）、任何一种格式可以直接导入(@import)到另一种格式中使用，或者通过sass-convert命令行工具转换成另一种格式:

# convert sass to scss
$sass-convert style.sas