Definisci le variabili in Sass in base alle classi

Mi piacerebbe sapere se è ansible definire una variabile in Sass a seconda se una class è impostata o meno. Ho bisogno di fare alcuni test sui tipi di carattere e vorrei cambiare la variabile font $basicFont modo dinamico in base alla class del corpo.

Per esempio:

 $basicFont: Arial, Helvetica, sans-serif; body { &.verdana { $basicFont: Verdana, sans-serif; } &.tahoma { $basicFont: Tahoma, sans-serif; } } 

C’è una possibilità di gestirlo in Sass?

No. Quello che chiedi richiederebbe Sass ad avere conoscenza del DOM. Sass si compila solo direttamente in CSS, non viene mai inviato al browser.

Con il tuo codice di esempio, tutto ciò che stai facendo è sovrascrivere $basicFont ogni volta. Nella versione 3.4 o successiva, la tua variabile esisterà solo nell’ambito del blocco in cui è stata impostata.

Quindi, le tue uniche opzioni reali sono utilizzare mix o estensioni.

Estendere

Questo è efficace, ma è adatto solo per casi molto semplici.

 %font-family { &.one { font-family: Verdana, sans-serif; } &.two { font-family: Tahoma, sans-serif; } } .foo { @extend %font-family; } 

Produzione:

 .one.foo { font-family: Verdana, sans-serif; } .two.foo { font-family: Tahoma, sans-serif; } 

mixin

Questo è il metodo che raccomanderei se si desidera un controllo un po ‘più fine su quali variabili vengono utilizzate dove.

 $global-themes: ( '.one': ('font-family': (Verdana, sans-serif), 'color': red) , '.two': ('font-family': (Tahoma, sans-serif), 'color': blue) ); $current-theme: null; // don't touch, this is only used by the themer mixin @mixin themer($themes: $global-themes) { @each $selector, $theme in $themes { $current-theme: $theme !global; &#{$selector} { @content; } } } @function theme-value($property, $theme: $current-theme) { @return map-get($theme, $property); } .foo { @include themer { font-family: theme-value('font-family'); a { color: theme-value('color'); } } } 

Produzione:

 .foo.one { font-family: Verdana, sans-serif; } .foo.one a { color: red; } .foo.two { font-family: Tahoma, sans-serif; } .foo.two a { color: blue; }