Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能
css功能扩展
4.1嵌套规则
.css1{ .css2{} }
4.2父选择器&
a { &:hover { color: red; } }
4.3属性嵌套
.funky { font: { family: fantasy; size: 30em; weight: bold; } }
命名空间可以包含自己的属性值
.funky { font: 20px/24px { family: fantasy; weight: bold; } }
4.4占位符选择器%foo
与常用的id与class选择器写法相似,只是#或.替换成了%。必须通过@extend指令调用,单独使用未通过@extend调用则不会编译到CSS文件中
注释
多行注释/* */
单行注释//
变量$
$width: 5em #main { width: $width; }
变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(即局部变量),全局定义的则为全局变量。
局部变量添加!global声明转换为全局变量
#main { $width: 5em !global; width: $width; } #sidebar { width: $width; }
数据类型
1.数字,1,2,13,10px
2.字符串:有引号与无引号字符串,"foo",baz
3.颜色:blue,#4a3f9,rgba(255,0,0,0.5)
4.布尔型:true,false
5.数组:用空格或逗号作分隔符,1.5em 1em 0 2em, A,B,C
6.maps:相当于JS的object,(key1:value1,key2,value2)
也支持其他css属性,比如unicode字符集,或!important声明。然而Sass不会特殊对待这些属性值,一律视为无引号字符串。
字符串
使用#{}时,有引号字符串将被编译为无引号字符串,便于mixin中引用选择器名
@mixin firefox-message($selector) { body.firefox #{$selector}:before { content: "Hi, Firefox users!"; } } @include firefox-message(".header");
编译为
body.firefox .header:before { content: "Hi, Firefox users!"; }
数组
nth
函数可以直接访问数组中的某一项;join
函数可以将多个数组连接在一起;append
函数可以在数组中添加新值;而 @each
指令能够遍历数组中的每一项。
子数组 1px 2px, 5px 6px
如果内外两层数组使用相同的分隔方式,需要用圆括号包裹内层,所以也可以写成 (1px 2px) (5px 6px)
运算
数字运算符+-*/%,如果必要会在不同单位件转换值
关系运算<,>,<=,>=也可用于数组运算
相等运算==,!=也可用于所有数据类型
可以颜色值运算、字符串运算
布尔运算and、or、not
圆括号用来影响运算顺序