2016-08-30 5 views
0

Der folgende scss mixin mit Kompilierungsfehler
Ungültiges CSS nach "... (Basis, $ Basis)": erwartet ")", war ";" kann nicht den Fehler lokalisieren, bitte helfenscss Mixins Fehler

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

Antwort

1

Sie einen Schließbügel nach $ Primärtext fehlen?

$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

Wenn Sie Vars Karte verwenden möchten, sollten Sie mögen dieses "key_name" schreiben: $ 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; 
    } 
} 

Grüße :)

+0

Dank für Ihren Vorschlag. – user1292594