Sass 变量

Sass变量

变量是存储稍后再使用的信息的一种方式，有了存储空间，您可以将信息存储在变量中，比如：

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

Sass使用 $ 符号后跟一个名称来声明变量。变量语法：$variablename: value;

    // HTML 部分
    <h1>Hello Xkd</h1>
    <p>变量</p>
    <div id="container">这是容器中的一些文本</div>
    
    // .scss 语法
    // 声明变量
    $font1: Helvetica, sans-serif;
    $color1: green;
    $fontSize1: 18px;
    $padding1: 5px 10px;
    body {
      font-family: $font1;
      font-size: $fontSize1;
      color: $color1;
    }
    #container {
      padding: $padding1;
    }
    
    // .css 输出
    // 当编译Sass 文件时，它会获取变量（以上的font1、fontSize1、color1、paddin1等），然后输出正常的普通值，并将这些变量值放在CSS中
    body {
      font-family: Helvetica, sans-serif;
      font-size: 18px;
      color: green;
      padding: 0 50px;
    }
    #container {
      border: 2px red solid;
      padding: 5px 10px;
    }

Sass 可变范围

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

    // HTML 部分
    <h1>Hello Xkd</h1>
    <p>变量</p>
    
    // scss 语法
    $myColor: red;
    h1 {
      $myColor: green;
      color: $myColor;
    }
    p {
      color: $myColor;
    }
    
    // css 输出
    h1{
      color: green;
    }
    p{
      color: red;
    }

<p> 标签内的文字颜色无论是红色还是绿色，它最后显示都会变红。

另一个定义是，$ myColor：green; 在 `<h1> 规则内，只有在那里可用，所以它在 css 中的输入如上所示。

使用 Sass！global

变量范围的默认行为可以通过使用 ！global 开关来覆盖变量作用域。

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

上面同样的例子，我们给 h1 添加一个 !global，那么原来定义的 $myColor:red; 这时候就失效了，它的颜色为green。

    $myColor: red;
    h1 {
      $myColor: green !global;
      color: $myColor;
    }
    p {
      color: $myColor;
    }
    
    // 输出 css
    h1 {
      color: green;
    }
    p {
      color: green;
    }

提示：全局变量应该在任何规则之外定义。

明智的做法是在它自己的名为“_globals.scss”的文件中定义所有全局变量，并用@include关键字包含该文件。