Sass 变量

• 

  定义和使用

  变量是一种存储信息的方法，以后可以重复使用。

  使用 Sass，您可以将信息存储在变量中，例如：

  • strings 字符串
  • numbers 数值
  • colors 颜色
  • booleans 布尔值
  • lists 列表值
  • nulls 空值

  Sass 使用 $ 符号，后跟名称来声明变量：

  $variablename:value;

  以下示例声明了四个名为 myFont，myColor，myFontSize 和 myWidth 的变量；声明变量后，可以在任何需要的地方使用变量：

  $myFont: Helvetica, sans-serif;
  $myColor: red;
  $myFontSize: 18px;
  $myWidth: 680px;
  
  body {
    font-family: $myFont;
    font-size: $myFontSize;
    color: $myColor;
  }
  
  #container {
    width: $myWidth;
  }
  

  因此，当编译 Sass 文件时，它将获取变量（myFont，myColor等）并输出普通 CSS，并将变量值放置在 CSS 中，如下所示：

  body {
    font-family: Helvetica, sans-serif;
    font-size: 18px;
    color: red;
  }
  
  #container {
    width: 680px;
  }
  

• 

  Sass 变量作用域

  Sass 变量仅在定义它们的嵌套级别可用。

  看下面的例子：

  $myColor: red;
  
  h1 {
    $myColor: green;
    color: $myColor;
  }
  
  p {
    color: $myColor;
  }
  

  <p> 标记内的文本颜色是红色还是绿色？ 它会变成红色！

  另一个定义，$myColor:green; 在 <h1> 规则内，并且仅在此处可用！

  因此，CSS 输出将是：

  h1 {
    color: green;
  }
  
  p {
    color: red;
  }
  

  好的，这是变量作用域的默认行为。

• 

  Sass !global 全局变量

  可以使用 !global 开关覆盖变量作用域的默认行为。

  !global 表示变量是全局变量，这意味着可以在所有级别上访问它。

  请看下面的示例（与上面相同；但是添加了 !global）：

  $myColor: red;
  
  h1 {
    $myColor: green !global;
    color: $myColor;
  }
  
  p {
    color: $myColor;
  }
  

  现在，<p> 标记内的文本颜色将变为绿色！

  因此，CSS 输出将是：

  h1 {
    color: green;
  }
  
  p {
    color: green;
  }
  

  提示：全局变量应在任何规则之外定义。 最好在自己的名为 “_globals.scss” 的文件中定义所有全局变量，并使用 @include 关键字包含该文件。