SASS Dynamische Variablennamen und Nested Loops Fehler werfen

Question

Ich bin mir nicht ganz sicher, ob das, was ich versuche, möglich ist, aber ich habe so viel wie möglich gesucht und die folgende verschachtelte Schleife erstellt, um viele Varianten von hex zu erstellen Farben (anstatt die Variablennamen manuell einzugeben).

$colors: (
    green: #006938, 
    pink: #9d1e65, 
    //... 
); 

$variations: (
    30%, 50%, 70%, 
); 

@each $hex, $name in $colors { 
    @each $v in $variations { 
     #{$name}-#{$v}: lighten($hex, $v); 
    } 
} 

Allerdings bin ich auf meiner zweiten Schleife die folgende Störung zu erhalten:

$ gulp sass 
[17:01:14] Using gulpfile ~/Sites/webcomponents/gulpfile.js 
[17:01:14] Starting 'sass'... 

events.js:163 
     throw er; // Unhandled 'error' event 
    ^
Error: src/scss/app.scss 
Error: Invalid CSS after "...n $variations {": expected 1 selector or at-rule, was "#{$name}-#{$v}: lig" 
     on line 72 of src/scss/app.scss 
>>  @each $v in $variations { 
    -----------------------------^ 

    at options.error (/Users/martynbisset/Sites/webcomponents/node_modules/node-sass/lib/index.js:291:26) 

Ist dies nicht die korrekte Syntax für eine verschachtelte Schleife? Wenn ich versuche, den Variablennamen dynamisch ohne die Schleife zu machen, bekomme ich auch einen Fehler. Sorry, irgendwie zwei Fragen in einem, aber ich würde mich über jeden Hinweis freuen, da ich mit SASS/SCSS ziemlich neu bin.

$name: "Hello"; 
$v: "70%"; 

#{$name}-#{$v}: lighten($hex, $v); // throws error too :(

Answer 1

Sie können keine dynamischen Variablen in scss erstellen. Sie können stattdessen den Variablennamen in einen Klassennamen konvertieren und diesen überall verwenden. Sie hatten auch ein Syntaxproblem in @each. Es ist Schlüssel, Wert so Ihre jeder wird $ name, $ hex

$colors: (
    green: #006938, 
    pink: #9d1e65, 
    //... 
); 

$variations: (
    30, 50, 70, 
); 

@each $name, $hex in $colors { 
    @each $v in $variations { 
     $perc: percentage($v/100); 
     .#{$name}-#{$v} { 
     background-color: lighten($hex, $perc); 
     } 
    } 
} 

Answer 2

Einige Korrekturen in Ihrem SASS sein,

1. Syntax von map

   map-name{ 
       key: value, 
       key: value, 
       ... 
   } 
   

   So korrigieren Definition von $variations. Auch wenn Sie key nicht angeben, wird es funktionieren, aber das ist weder die richtige Syntax noch modulare Programmierung.

SASS bietet auch map-get() die value mit key zu bekommen.

Beispiel

$font: ( /*define 'font' map*/ 
    color: #666, 
    size: 16px 
); 

body { 
    color: map-get($font, color);  /*get value of 'color' property of 'font'*/ 
    font-size: map-get($font, size); 
} 

2. Sie nicht Variablennamen dynamisch in SASS erklären können, so besser, einige CSS-Klasse in @each Schleife zu erstellen und nutzen.

Verwenden Sie den unten SASS Code:

$color:( 
    green: #006938, 
    pink: #9d1e65 
); 
$variations: (
    thirty: 30%, 
    fifty: 50% 
); 

@each $name, $hex in $color { 
    @each $n, $v in $variations { 
     .color-#{$name}-#{$n}{ 
      color: lighten($hex, $v); 
     } 
    } 
} 

Nach dem Übersetzen, wird es die unten CSS erzeugen,

.color-green-thirty { 
    color: #03ff89; 
} 

.color-green-fifty { 
    color: #69ffb9; 
} 

.color-pink-thirty { 
    color: #e470b1; 
} 

.color-pink-fifty { 
    color: #f4c6e0; 
}