Sass预处理技术 变量 嵌套规则

Sass预处理技术

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

特色功能

完全兼容CSS3。

在CSS基础上增加变量、嵌套(nesting) 、混合(mixins) 等功能。

通过函数(hsla、 max、floor等)进行颜色值与属性值的运算。

提供控制指令(if、 for、 each 等)等高级功能。

自定义输出格式。

语法格式

Sass有两种语法格式: SCSS 和SASS。

scss以.scss作为拓展名

中划线，下划线

这两种用法相互兼容

在sass的大多数地方，中划线命名的内容和下划线命名的内容是互通的，包括对混合器和sass函数的命名，除了变量。但是在sass中纯CSs部分不互通，比如类名、ID 或属性名。

嵌套规则

使样式可读性更高。在sass中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass 在输出css时会帮你把这些嵌套规则处理好，避免你的重复书写。

父选择器标识符&

群组选择器的嵌套

在css里边，选择器h1, h2，h3会同时选中h1元素、h2 元素和h3元素。这种选择器称为群组选择器。群组选择器的规则会对命中群组中任何一个选择器的元素生效。当sass解开一个群组选择 器规则内嵌的规则时，它会把每一个内嵌选择器的规则都正确地解出来:

子组合选择器和同层组合选择器：> + ~

嵌套属性

嵌套属性的规则 : 把属性名从中划线-的地方断开,在根属性后边添加一个冒号:,紧跟-一个{ }块,把子属性部分写在这个{ }块中。就像css选择器嵌套一样, sass 会把你的子属性一-解开, 把根属性和子属性部分通过中划线-连接起来,最后生成的效果与你手动一遍遍写的css样式一样: