sass
的变量名可以与css
中的属性名和选择器名称相同,包括中划线和下划线。这完全取决于个人的喜好,有些人喜欢使用中划线来分隔变量中的多个词(如$highlight-color
),而有些人喜欢使用下划线(如$highlight_color
)。使用中划线的方式更为普遍,这也是compass
和本文都用的方式。
不过,sass
并不想强迫任何人一定使用中划线或下划线,所以这两种用法相互兼容。用中划线声明的变量可以使用下划线的方式引用,反之亦然。这意味着即使compass
选择用中划线的命名方式,这并不影响你在使用compass
的样式中用下划线的命名方式进行引用:
$link-color: blue;
a {
color: $link_color;
}
//编译后
a {
color: blue;
}
在上例中,$link-color
和$link_color
其实指向的是同一个变量。实际上,在sass
的大多数地方,中划线命名的内容和下划线命名的内容是互通的,除了变量,也包括对混合器和Sass函数的命名。但是在sass
中纯css
部分不互通,比如类名、ID或属性名。
尽管变量自身提供了很多有用的地方,但是sass
基于变量提供的更为强大的工具才是我们关注的焦点。只有当变量与sass
的其他特性一起使用时,才能发挥其全部的潜能。接下来,我们将探讨其中一个非常重要的特性,即规则嵌套。
描述 @include 指令用于在文档中包含mixin。将使用mixin的名称,并将可选参数传递给它。由mixin定义的样式可以包含在当前规则中...
描述您可以通过向变量值的结尾添加!default 标志来设置变量的默认值。如果值已经分配给变量,则不会重新分配该值。例子以下示例...
描述使用extend,我们可以将特定选择器的相同样式组合到其他选择器中。例子下面的例子描述了在LESS文件中使用混合样式mixin:ext...
描述您可以通过向其传递参数来更改mixin的行为。考虑一个简单的LESS代码片段:.mixin(@a; @color) { ... }.line {.mixin(@color-...
描述您可以使用默认函数将mixin与其他混合匹配进行匹配,并创建 else 或默认 语句。例子下面的例子演示了在LESS文件中使用条件混...