Измените все значения переменных на основе класса корпуса

Question

Я работаю над локализацией на основе темы. Для этого я получаю класс на теге тела для каждой локализации. мне нужно изменить все переменные значения на основе этого класса Для большего понимания

$a: #000; 
$b= Arial; 

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

Пожалуйста, не JS код только

СКС

Answer 1

Следующий пример использует карту, чтобы определить различные значения темы. Mixin будет обертывать каждый селектор в классе (ключ карты) и создавать глобальные переменные, которые будут использоваться внутри каждого селектора.

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

Выход:

.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. в ближайшем будущем переменные CSS облегчат этот тип работы с использованием наследования переменных.

.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); 
} 

Answer 2

Использование @import и! По умолчанию переменных

// –––––––––––––––––––––––––––––––––––––– 
// _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'; 
}