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關鍵字包含該文件。