文件后缀名
sass 有两种文件后缀名,一种是sass后缀,不使用大括号和分号;一种是scss,与平时写的css文件格式差不多,使用大括号和分号。这里都是以scss文件后缀为主,避免sass后缀的严格格式要求报错。
变量声明
对于重复使用的属性值可以定义成变量,这是sass让人收益的一个重要特性。变量名命名要使人易懂,见名即知其用途;早期sass变量命名是以“!”来标识变量(这与css中 !important冲突,但改的原因并不知晓),后改为
“ $ ”
,例:$highlight-color
变量的定义及命名
$highlight-color:red;
这就代表有一个值为red的变量。sass的变量名可以与css中的属性名和选择器名相同,包括中划线和下划线。大多数人更喜欢使用中划线。实际上在sass的大多数地方,中划线命名的内容和下划线命名的内容是互通的,除了变量也包括对混合器和sass函数的命名;$link-color 和 $link_color
其实指向的是同一个变量。但在sass中纯css部分不互通,如类名、ID和属性名。
变量的使用
变量可以赋值任何css属性值,如
$base-border : 1px solid #333
;或是以逗号分割的多个属性值,$base-font:Helvetica,"Liberation Sans",Arial;
编译后的效果为:
变量范围
变量可以出现在代码块外,如果变量出现在代码块内,那该变量只能在代码块内使用。