Sass变量

如果你之前没有使用过Sass，光是Sass中的变量就足以吸引你喜欢上Sass了。

之前的文章中我们已经学习过为什么变量如此重要了，现在让我们一起来学习一下如何使用它。

定义变量的基本语法很简单：只需在变量名之前使用$并将其定义视为CSS样式：

$<variable name>:<value>;

下面的代码声明了一个名为large-font的变量。

$large-font: 50px;

一旦你声明变量后，你就可以将变量作为值在任何地方使用，例如：

$large-font: 50px;

p {
    font-size: $large-font;
}

Sass转换器将会将上面的代码转换为：

p {
    font-size: 50px;
}

在声明变量时，有一个小的注意点：由于历史原因，’-‘和’_’是可以互换的，请看下面例子：

$main-color: red;

p {
   color: $main-color; /*使用-*/
}

a {
   color: $main_color;/* 使用_等价于上面代码*/
}

上面的示例中，两个代码效果相同。

作用域

与现代的编程语言一样，Sass支持作用域的概念：变量仅在定义他们的嵌套级别中可以使用。

//Sass嵌套作用域
$main-color: red;

p {
   $main-color: blue;
   color: $main-color;
}

a {
  color: $main-color;
}

上面的代码，你能搞清楚对应的颜色吗？

a标签对应的是红色

p标签对应的是蓝色

以下是经过转换器转换后的代码：

p {
   color: blue;
}

a {
   color: red;
}

这是默认的行为，你还可以使用!global覆盖它，例如以下代码

$main-color: red;

p {
   $main-color: blue !global;
   color: $main-color;
}

a {
  color: $main-color;
}

将会转换为以下代码：

p {
   color: blue;
}

a {
   color: blue;
}

如果你希望变量是全局变量，那么就可以使用!global。

不过实际项目中我们一般将全局变量封装在一个_gloabl.scss文件中，在需要使用的时候使用@inlcude引入。

下一篇文章，我们将一起学习表达式。