scss Mixins 错误答案

【问题标题】：scss Mixins errorscss Mixins 错误
【发布时间】：2016-08-30 09:49:52
【问题描述】：

以下 scss mixin 存在编译错误
“... (base, $base)”后的 CSS 无效：预期为“)”，为“;” 找不到错误，请帮忙

// Variables for Materiel colours
$primary         : #0293FF;
$primary-dark    : darken($primary,25%);
$primary-light   : lighten($primary,75%);
$accent          : #FF5252;

$text            : #ffffff;
$primary-text    : #333333;
$secondary-text  : #727272;
$divider         : #B6B6B6;
$base            : #FAFAFA;

$palette:    (primary, $primary),
            (primary-dark, $primary-dark),
            (primary-light, $primary-light),
            (text, $text),
            (primary-text, $primary-text,
            (secondary-text, $secondary-text),
            (accent, $accent),
            (divider, $divider),
            (base, $base);

@each $palette , $color in $palette  {
  .colour-#{$palette } {
    color: $color;
  }
   .bg-#{$palette } {
    background-color: $color;
  }
}

【问题讨论】：

标签： css sass mixins

【解决方案1】：

$primary-text 后是否缺少右括号？

$palette:    (primary, $primary),
            (primary-dark, $primary-dark),
            (primary-light, $primary-light),
            (text, $text),
            (primary-text, $primary-text),
            (secondary-text, $secondary-text),
            (accent, $accent),
            (divider, $divider),
            (base, $base);

【讨论】：

【解决方案2】：

如果你想使用 vars map ，你应该这样写 "key_name" : $value

// Variables for Materiel colours
$primary         : #0293FF;
$primary-dark    : darken($primary,25%);
$primary-light   : lighten($primary,75%);
$accent          : #FF5252;

$text            : #ffffff;
$primary-text    : #333333;
$secondary-text  : #727272;
$divider         : #B6B6B6;
$base            : #FAFAFA;

$palette:(
       "primary": $primary,
       "primary-dark": $primary-dark,
       "primary-light": $primary-light,
       "text": $text,
       "primary-text": $primary-text,
       "secondary-text": $secondary-text,
       "accent": $accent,
       "divider": $divider,
       "base": $base
);


@each $palette , $color in $palette  {
  .colour-#{$palette} {
    color: $color;
  }
   .bg-#{$palette} {
    background-color: $color;
  }
}

问候:)

【讨论】：