Sass - 变量($)

基本语法

定义一个 Sass 变量非常简单，变量以美元符号($)开始，赋值像设置 CSS 属性一样：

$new-color: rgb(255,0,0);

然后，便可以使用该变量：

div{
  background: $new-color;
}

编译为CSS：

div{
  background: rgb(255,0,0)
}

局部变量

几乎所有语言均存在局部变量与全局变量，当然 Sass 也不例外，同样存在局部变量，请看如下代码：

#main{
    /* 该变量在类中 */
    $new_width: 50px;
    width: $new_width;
}

div{
    /* 尝试访问 => $new_width */
    width: $new_width;
}

报错：Error: Undefined variable: “$new_width”. ，提示未定义该变量。

从如上例子，你应该很清楚为什么会Error：变量仅在它定义的选择器嵌套层级的范围内可用，你完全可以理解为块级作用域。

!global

如果你想在嵌套层级内定义变量，并且还想要外部能够访问，不妨试试变量后面加上 !global 试一试：

/* 沿用 【局部变量】 代码 */

#main{
    /* 该变量在类中 */
    $new_width: 50px !global;
    width: $new_width;
}

div{
    /* 尝试访问 => $new_width */
    width: $new_width;
}

编译为CSS：

#main {
  /* 该变量在类中 */
  width: 50px; 
}

div {
  /* 尝试访问 => $new_width */
  width: 50px; 
}

简单且不严谨的说，就是将块级作用域升级到全局作用域，不在赘述。

全局变量

不在任何嵌套选择器内定义的变量，可以在任何地方使用，请看如下代码：

/* 全局变量 */
$new_width: 50px;

#main{
    width: $new_width;
}

div{
    width: $new_width;
}

...

编译为CSS：

/* 全局变量 */
#main {
  width: 50px; 
}

div {
  width: 50px; 
}

很容易理解…

写在后面

由于历史原因，变量名（以及其他所有Sass标识符）可以互换连字符 - 和下划线 _ 。 例如，如果你定义了一个名为 $new_width ，您可以使用 $new-width 访问它，反之亦然。

 $new_width: 50px;

.demo{
    width: $new-width;
}

编译为CSS：

.demo {
  width: 50px; 
}