Ändern Sie alle Variablenwerte basierend auf der Body-Klasse

Ich arbeite an themenbasierter Lokalisierung. Dafür erhalte ich für jede Lokalisierung Klassen für Body-Tags. Ich brauche alle Variablen Wert auf dieser Klasse Ändern Sie alle Variablenwerte basierend auf der Body-Klasse

Weitere Verständnis von SCSS

$a: #000; 
$b= Arial; 

if body has class Australia then 
$a: #ff0000; 
$b: 'Roboto';

Bitte keine js Code

Quelle

2017-02-15 Master.Deep

So ziemlich dem gleichen wie in dieser Frage, die eine Stunde früher gefragt wurde? http://stackoverflow.com/questions/42249085/sass-group-elements-for-reuse – CBroe

Ich überprüft diese Frage, war aber nicht hilfreich. es erwähnt für eine bestimmte Gruppe von Elementen. aber für mich brauche ich es für die gesamte Website. Diese Variablen werden mehrfach in mehreren Klassen verwendet. –

Im folgenden Beispiel wird eine Karte nur auf Basis ändern verschiedene Themenwerte zu definieren. Der Mixin wird jeden Selektor in eine Klasse (den Map-Schlüssel) einschließen und globale Variablen erstellen, die in jedem Selektor verwendet werden.

$theme-map:(
    '.australia': (color: blue, font-family: Roboto), 
    '.denmark' : (color: red, font-family: Arial)  
); 


@mixin theme { 
    @each $class, $map in $theme-map { 
    #{$class} & { 
     $color:  map-get($map, color)  !global; 
     $font-family: map-get($map, font-family) !global; 
     @content; 
    } 
    } 
} 



.foo { 
    @include theme { 
    color: $color; 
    font-family: $font-family; 
    } 
} 


.bar{ 
    @include theme { 
    background-color: $color; 
    } 
}

Output:

.australia .foo { 
    color: blue; 
    font-family: Roboto; 
} 
.denmark .foo { 
    color: red; 
    font-family: Arial; 
} 

.australia .bar { 
    background-color: blue; 
} 
.denmark .bar { 
    background-color: red; 
}

PS. In naher Zukunft werden CSS-Variablen diese Art der Arbeit erleichtern, indem sie die Variable Vererbung verwenden.

.australia { 
    --color: red; 
    --font-family : Arial; 
} 

.denmark { 
    --color: blue; 
    --font-family : Roboto; 
} 



.foo { 
    color: var(--color); 
    font-family: var(--font-family); 
} 

.bar { 
    backgound-color: var(--color); 
}

Quelle

2017-02-15 14:17:34

Ich möchte nicht jeden Selektor bearbeiten. Weil es Tausende von Selektoren gibt, die diese Variable verwenden. Das Bearbeiten jedes einzelnen dauert ein ganzes Leben. –

In diesem Fall kann man @import und! Standardvariablen verwenden - ich füge ein neues Beispiel hinzu. Beachten Sie auch den aktualisierten Abschnitt über CSS-Variablen –

Mit @import und! Standardvariablen

// –––––––––––––––––––––––––––––––––––––– 
// _style.scss 
// underscore added to prevent compilation 
// –––––––––––––––––––––––––––––––––––––– 

$color  : red !default; 
$font-family: Arial !default; 

.foo { color: $color; } 
.bar { font-family: $font-family; } 



// –––––––––––––––––––––––––––––––––––––– 
// style.scss (compile file) 
// –––––––––––––––––––––––––––––––––––––– 
// redefine variables 
$color: blue; 
$font-family: Roboto; 

// add wrapper if needed (will be added to all selectors) 
.australia { 
    @import '_style.scss'; 
}

Quelle

2017-02-15 14:41:38

Ändern Sie alle Variablenwerte basierend auf der Body-Klasse

Antwort

Verwandte Themen