Sass基础教程 Sass快速入门 Sass中文手册 | Sass中文网
https://www.sass.hk/guide/
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border;
}
//编译后
.selected {
border: 1px solid #F90;
}
这里, $highlight-border 变量的声明中使用了 $highlight-color 这个变量。产生的效 果就跟你直接为 border 属性设置了一个
1px $highlight-color solid 的值是一样的。 最后,我们来了解一下变量命名的实用技巧,以结束关于变量的介绍。
1-3. 变量名用中划线还是下划线分隔;
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 的其
他特性一起使用时,才能发挥其全部的潜能。接下来,我们将探讨其中一个非常重要的特性,即规则嵌套。
2. 嵌套CSS 规则;
css 中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时,往往需要 一遍又一遍地写同一个 ID :
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
像这种情况, sass 可以让你只写一遍,且使样式可读性更高。在Sass中,你可以像俄罗斯套娃那样在规则块中嵌套规则块。
sass 在输出 css 时会帮你把这些嵌套规则处理好,避免你的重复书写。
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}