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 文件時，它會獲取變量（以上的font一、fontSize一、color一、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關鍵字包含該文件。