SCSS 中的变量

Created: November-22, 2018

在 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 访问，反之亦然。