JSRUN 用代码说话

使用变量

编辑教程

使用变量

sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。

或者,对于仅使用过一次的属性值,你可以赋予其一个易懂的变量名,让人一眼就知道这个属性值的用途。

sass使用$符号来标识变量,比如$highlight-color和$sidebar-width。

为什么选择$符号呢?因为它好认、更具美感,且在CSS中并无他用,不会导致与现存或未来的css语法冲突。

变量声明

sass变量的声明和css属性的声明很像:

$highlight-color: #F90;

这意味着变量$highlight-color现在的值是#F90。任何可以用作css属性值的赋值都可以用作sass的变量值,甚至是以空格分割的多个属性值,
如$basic-border: 1px solidblack;,
或以逗号分割的多个属性值,
如$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这两个变量,接下来我们将进一步探讨变量的使用方法。

变量引用

凡是css属性的标准值(比如说1px或者bold)可存在的地方,变量就可以使用。css生成时,变量会被它们的值所替代。

之后,如果你需要一个不同的值,只需要改变这个变量的值,则所有引用此变量的地方生成的值都会随之改变。

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

//编译后

.selected {
  border: 1px solid #F90;
}

上例中的$highlight-color变量,它被直接赋值给border属性,当这段代码被编译输出css时,$highlight-color会被#F90这一颜色值所替代。产生的效果就是给selected这个类一条1像素宽、实心且颜色值为#F90的边框。

在声明变量时,变量值也可以引用其他变量。当通过粒度区分,为不同的值取不同名字时,这相当有用。

下例在独立的颜色值粒度上定义了一个变量,且在另一个更复杂的边框值粒度上也定义了一个变量:

$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的值是一样的。

变量名用中划线还是下划线分隔

sass的变量名可以与css中的属性名和选择器名称相同,包括中划线和下划线。使用中划线的方式更为普遍,这也是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的其他特性一起使用时,才能发挥其全部的潜能。

JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟