变量

sass支持变量，开头使用$符号表示，并且可以存储多种数据类型。

• 字符串
• 数字
• 颜色值
• 布尔值
• 列表
• null 值

例子

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;
}

变量也是有作用域的。

$myColor: red;

h1 {
  $myColor: green;   // 只在 h1 里头有用，局部作用域
  color: $myColor;
}

p {
  color: $myColor;
}

我们在h1选择器里面声明的变量，只有他本身或者他里面的子选择器才有效，而{}就是一个作用域，可以理解为js中function的作用域。

全局声明 !global

哪怕我们的变量是写在作用域中的，我们依然可以使用强制声明，将其转换为全局的声明，这就和css中的!important效果相同

$myColor: red;

h1 {
  $myColor: green !global;  // 全局作用域
  color: $myColor;
}

p {
  color: $myColor;
}

此时下面的p元素选择器的颜色color变成了green