sass - Zurb Foundation 6 原色变量

Question

查看 Zurb Foundation 6 中的 _settings.scss，SASS 变量 $primary-color 似乎没有任何赋值。我的问题是 $foundation-palettes primary 是否等同于 $primary-color？

$foundation-palette: (
  primary: #2199e8,
  secondary: #777,
  success: #3adb76,
  warning: #ffae00,
  alert: #ec5840,
);

Answer 1

是的。 scss/util/_color.scss 中有一个 @mixin 为我们处理这个问题:

/// Transfers the colors in the `$foundation-palette` variable into the legacy color variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.
@mixin add-foundation-colors() {
  @if map-has-key($foundation-palette, primary) {
    $primary-color: map-get($foundation-palette, primary) !global;
  }
  @if map-has-key($foundation-palette, secondary) {
    $secondary-color: map-get($foundation-palette, secondary) !global;
  }
  @if map-has-key($foundation-palette, success) {
    $success-color: map-get($foundation-palette, success) !global;
  }
  @if map-has-key($foundation-palette, warning) {
    $warning-color: map-get($foundation-palette, warning) !global;
  }
  @if map-has-key($foundation-palette, alert) {
    $alert-color: map-get($foundation-palette, alert) !global;
  }
}