總結Sass 變數

Sass (英文全稱：Syntactically Awesome Stylesheets) 是一個最初由 Hampton Catlin 設計並由 Natalie Weizenbaum 開發的層疊樣式表語言。

變數用於儲存一些資訊，它可以重複使用。

Sass 變數可以儲存以下資訊：

1. 字串
2. 數字
3. 顏色值
4. 布林值
5. 列表
6. null 值

Sass 變數使用 $ 符號：

$variablename: value;

以下例項設定了四個變數：myFont, myColor, myFontSize, 和 myWidth。

變數宣告後我們就可以在程式碼中使用它：

Sass 程式碼：

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

將以上程式碼轉換為 CSS 程式碼，如下所示：

Css 程式碼：

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

Sass 變數的作用域只能在當前的層級上有效果，如下所示 h1 的樣式為它內部定義的 green，p 標籤則是為 red。

Sass 程式碼：

$myColor: red;
h1 {
  $myColor: green;   // 只在 h1 裡頭有用，區域性作用域
  color: $myColor;
}
p {
  color: $myColor;
}

將以上程式碼轉換為 CSS 程式碼，如下所示：

Css 程式碼：

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

當然 Sass 中我們可以使用 !global 關鍵詞來設定變數是全域性的：

Sass 程式碼

$myColor: red;
h1 {
  $myColor: green !global;  // 全域性作用域
  color: $myColor;
}
p {
  color: $myColor;
}

現在 p 標籤的樣式就會變成 green。

將以上程式碼轉換為 CSS 程式碼，如下所示：

Css 程式碼

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

原文地址：