Creare o referenziare variabili in modo dinamico in Sass

Sto cercando di utilizzare l’interpolazione della stringa sulla mia variabile per fare riferimento a un’altra variabile:

// Set up variable and mixin $foo-baz: 20px; @mixin do-this($bar) { width: $foo-#{$bar}; } // Use mixin by passing 'baz' string as a param for use $foo-baz variable in the mixin @include do-this('baz'); 

Ma quando lo faccio, ottengo il seguente errore:

Variabile non definita: “$ foo-“.

Sass supporta variabili variabili in stile PHP?

Sass non consente la creazione o l’accesso dinamico di variabili. Tuttavia, è ansible utilizzare elenchi per comportamento simile.

SCSS:

 $list: 20px 30px 40px; @mixin get-from-list($index) { width: nth($list, $index); } $item-number: 2; #smth { @include get-from-list($item-number); } 

css generato:

 #smth { width: 30px; } 

Questo è effettivamente ansible fare usando le mappe SASS invece delle variabili. Ecco un rapido esempio:

Referenziamento dinamico:

 $colors: ( blue: #007dc6, blue-hover: #3da1e0 ); @mixin colorSet($colorName) { color: map-get($colors, $colorName); &:hover { color: map-get($colors, $colorName#{-hover}); } } a { @include colorSet(blue); } 

Uscite come:

 a { color:#007dc6 } a:hover { color:#3da1e0 } 

Creazione dynamic:

 @function addColorSet($colorName, $colorValue, $colorHoverValue: null) { $colorHoverValue: if($colorHoverValue == null, darken( $colorValue, 10% ), $colorHoverValue); $colors: map-merge($colors, ( $colorName: $colorValue, $colorName#{-hover}: $colorHoverValue )); @return $colors; } @each $color in blue, red { @if not map-has-key($colors, $color) { $colors: addColorSet($color, $color); } a { &.#{$color} { @include colorSet($color); } } } 

Uscite come:

 a.blue { color: #007dc6; } a.blue:hover { color: #3da1e0; } a.red { color: red; } a.red:hover { color: #cc0000; } 

Ogni volta che ho bisogno di usare un valore condizionale, mi baso sulle funzioni. Ecco un semplice esempio.

 $foo: 2em; $bar: 1.5em; @function foo-or-bar($value) { @if $value == "foo" { @return $foo; } @else { @return $bar; } } @mixin do-this($thing) { width: foo-or-bar($thing); } 

Ecco un’altra opzione se stai lavorando con le guide, e probabilmente in altre circostanze.

Se aggiungi .erb alla fine dell’estensione del file, Rails elaborerà erb sul file prima di inviarlo all’interprete SASS. Questo ti dà la possibilità di fare ciò che vuoi in Ruby.

Ad esempio: (file: foo.css.scss.erb)

 // Set up variable and mixin $foo-baz: 20px; // variable <% def do_this(bar) "width: $foo-#{bar};" end %> #target { <%= do_this('baz') %> } 

Risultati nel seguente scss:

 // Set up variable and mixin $foo-baz: 20px; // variable #target { width: $foo-baz; } 

Quale, di grosso, risulta nel seguente css:

 #target { width: 20px; } 

Per rendere una variabile dynamic non è ansible in SASS al momento, dal momento che si aggiungerà / collegherà un’altra var che deve essere analizzata una volta quando si esegue il comando sass.

Non appena viene eseguito il comando, verrà generato un errore per CSS non valido, poiché tutte le variabili dichiarate seguiranno il sollevamento.

Una volta eseguito, non è ansible dichiarare variabili al volo

Per sapere che ho capito questo, si prega di indicare se il seguente è corretto:

vuoi dichiarare le variabili in cui la parte successiva (parola) è dynamic

qualcosa di simile a

 $list: 100 200 300; @each $n in $list { $font-$n: normal $n 12px/1 Arial; } // should result in something like $font-100: normal 100 12px/1 Arial; $font-200: normal 200 12px/1 Arial; $font-300: normal 300 12px/1 Arial; // So that we can use it as follows when needed .span { font: $font-200; p { font: $font-100 } } 

Se questo è quello che vuoi, ho paura fin d’ora, questo non è permesso