什么是SASS
sass是“css预处理器”中的一员,所谓“css预处理器”就是用一种专门的编程语言,进行网页样式设计,然后再编译成正常的css文件。
sass就是在css语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。
sass有两种文件格式,文件后缀名分别为.scss和.sass
其中.scss文件和一般的.css文件格式一样,都有花括号和分号,仅仅只是在css的语法上进行了拓展;而.sass文件使用 “缩进” 代替 “花括号” 表示属性属于某个选择器,用 “换行” 代替 “分号” 分隔属性。缩进格式也可以使用 Sass 的全部功能,只是与 SCSS 相比个别地方采取了不同的表达方式,具体请查看the indented syntax reference。
基本语法
*下文中的涉及到的例子均为.sass文件格式
变量($)
变量有块级作用域(局部变量)和全局作用域(全局变量)之分,也可通过!global将块级作用域里面的局部变量转化为全局变量;
*这里遇到了一个坑,在.sass文件中不要在!global后面直接添加注释,编译会报错,但是在.scss文件中在!global后面直接添加注释,编译却不会报错,估计是因为.scss文件中有;可以明确区分代码和注释,而.sass中不能明确区分什么是注释什么是代码
如果要将变量插入到字符串中,可以使用插值符号——#{}
嵌套(选择器嵌套&属性嵌套&父选择器)
运算
SASS还支持运算的功能
加减乘除、取整等运算 (+, -, *, /, %),同时,如果有需要它会在不同单位间转换值。
比较特殊的是/运算,根据不同情况可以处理为除法运算或者仅仅只是分隔数字的作用
以下三种情况/将被视为除法运算符号:
如果值,或值的一部分,是变量或者函数的返回值
如果值被圆括号包裹
如果值是算数表达式的一部分
但如果希望使用变量,同时又要确保/不做除法运算而是完整地编译到 CSS 文件中,只需要用#{}插值语句将变量包裹。
除了数值的运算还有颜色值的计算
颜色值的运算是分段计算进行的,也就是分别计算红色,绿色,以及蓝色的值
不过感觉一般实际项目中很少用到颜色值的计算,不过觉得有趣,所以就简单提一下
混合指令 (Mixin Directives)
混合指令(Mixin)用于定义可重复使用的样式,通过@mixin来定义,@include来调用,同时支持参数的指定,参数若是没有传时,可以使用默认值,或者明确要传入哪一个特定参数。
继承 ( @extend )
sass支持一个选择器继承另一个选择器的所有样式。
插入文件( @import )
Sass 拓展了@import的功能,允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
若导入的文件后缀名为.css文件,则import作为普通的css语句。
若导入的文件后缀名为.sass或.scss,则被导入的文件将与当前文件合并,同时,@import "foo"或者@import "foo.sass"导入的效果都是一致的,没有指定拓展名,Sass 将会试着寻找文件名相同,拓展名为.scss或.sass的文件并将其导入。
注释
Sass 支持标准的 CSS 多行注释/* */,以及单行注释//,前者会被完整输出到编译后的 CSS 文件中,而后者则不会。
高级用法
sass支持的数据类型中,除了数字,字符串,颜色,布尔型,空值,
还有:
数组 (list),用空格或逗号作分隔符,1.5em 1em 0 2em, Helvetica, Arial, sans-serif
maps, 相当于 JavaScript 的 object,(key1: value1, key2: value2)
于是我们便可以使用@each这样的高级用法
@each
@for
@if
SASS常用语法就总结到这里了,都是一些比较常见,日常开发中能用到的语法。
在总结的过程中,对我也是一个很好的巩固的过程,毕竟组织成文字和小demo的形式更容易记住。
最后,个人认为用的合适才是发挥了sass带来的便利,不要为了用sass而用sass,一不小心反而会使得代码变得复杂。