sass学习

发布时间 2023-04-13 16:02:02作者: 小石糖记
  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

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