上一节:
下一节:

  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 关键字包含该文件。
上一节:
下一节: