sass学习3——文件后缀、变量

文件后缀名

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;

image.png
编译后的效果为：
image.png

变量范围

变量可以出现在代码块外，如果变量出现在代码块内，那该变量只能在代码块内使用。