SCSS 中的變數

在 SCSS 中，變數以 $ 符號開頭，並設定為 CSS 屬性。

$label-color: #eee;

它們僅在定義它們的巢狀選擇器中可用。

#menu {
    $basic-color: #eee;
    color: $basic-color;
}

如果它們是在任何巢狀選擇器之外定義的，那麼它們可以在任何地方使用。

$width: 5em;

#menu {
  width: $width;
}

#sidebar {
  width: $width;
}

它們也可以用 !global 標誌定義，在這種情況下它們也可以在任何地方使用。

#menu {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

重要的是要注意變數名稱可以互換使用連字元和下劃線。例如，如果定義一個名為 $label-width 的變數，則可以將其作為 $label_width 訪問，反之亦然。