sass
变量的声明和css
属性的声明很像:
$highlight-color: #F90;
这意味着变量$highlight-color
现在的值是#F90
。任何可以用作css
属性值的赋值都可以用作sass
的变量值,甚至是以空格分割的多个属性值,如$basic-border: 1px solid black;
,或以逗号分割的多个属性值,如$plain-font: "Myriad Pro"、Myriad、"HelveticaNeue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;
。这时变量还没有生效,除非你引用这个变量——我们很快就会了解如何引用。
与CSS
属性不同,变量可以在css
规则块定义之外存在。当变量定义在css
规则块内,那么该变量只能在此规则块内使用。如果它们出现在任何形式的{...}
块中(如@media
或者@font-face
块),情况也是如此:
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
//编译后
nav {
width: 100px;
color: #F90;
}
在这段代码中,$nav-color
这个变量定义在了规则块外边,所以在这个样式表中都可以像nav
规则块那样引用它。$width
这个变量定义在了nav
的{ }
规则块内,所以它只能在nav
规则块内使用。这意味着是你可以在样式表的其他地方定义和使用$width
变量,不会对这里造成影响。
只声明变量其实没啥用处,我们最终的目的还是使用它们。上例已介绍了如何使用$nav-color
和$width
这两个变量,接下来我们将进一步探讨变量的使用方法。