sass学习

1. 变量

Sass使用$符号来标识变量

上面我们声明了一个名为$highlight-color的变量，我们可以把该变量用在任何位置

以空格分割的多属性值也可以标识标量

变量范围

与css属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用。如果它们出现在任何形式的{…}块中(如@media或者@font-face块)，情况也是如此:

在这段代码中，$nav-color 这个变量定义在了规则块外边，所以在这个样式表中都可以像 nav规则块那样引用它。$width这个变量定义在了nav的{ }规则块内，所以它只能在nav规则块内使用。这意味着是你可以在样式表的其他地方定义和使用 $width 变量，不会对这里造成影响。

嵌套语法

和less一样，scss同样支持嵌套型的语法

转化后

&父选择器

假如你想针对某个特定子元素进行设置

比如

学到这里，我们会发现scss和less有很多相似之处，最大的区别就在于声明变量的方式，less采用的是@变量名，而scss采用的$变量名

此时，我们再来看一下模板中的styles/variables.scss

上述文件，实际上定义了我们的一些基础数值，方便大家在某个文件统一的处理.