2016-08-30 14 views
0

コンパイルエラーのある次のscss mixin
"...(base、$ base)":expected ")"、 "was" エラーを見つけることができません、scss Mixins error

// 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; 
    } 
} 

答えて

1

あなたは$プライマリ・テキストの後に閉じ括弧が欠落しています助けてください?

$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); 
0

あなたはVARSマップを使用する場合は、あなたがこの "たキー名" のように書く必要がありますが:$値

// 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; 
    } 
} 

よろしく:)

+0

ご提案いただきありがとうございます。 – user1292594