темы на основе класса SASS

Question

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

Я хочу, чтобы тема была основана на классе, который задан либо тегом HTML, либо тегом. Затем из этого вытекают все цвета и фон и т. Д.

Что я хочу, чтобы SASS выполнял всю работу ноги. Пожалуйста, простите за грубый пример, как я говорю, что я новичок в этом:

$baseBackground: #0f0; 

.blue { 
    $baseBackground: #0f0; 
} 
.red { 
    $baseBackground: #0f0; 
} 
.header { 
    background: $baseBackground; 
} 

Если блок кода выше SASS Я хочу CSS закончить как:

.header { 
    background: #0f0; 
} 
.blue .header { 
    background: #00f; 
} 
.red .header{ 
    background: #f00; 
} 

Я не имею ни малейшего представления возможно ли это или нет. Очевидно, что приведенный выше пример не работает. Есть ли способ справиться с этим, не создавая дополнительных стилей?

Большое спасибо за ваше время.

Chris

Answer 1

Я думаю, что лучшим решением является, вероятно, один, который использует SASS mixins. Вы можете настроить определение mixin для своей темы, используя различные цвета в качестве аргументов для mixin. Затем вы можете вызвать свои микшины с разными значениями аргументов для различных тем. Вот пример, простирался от твоего мало, что показывает использование нескольких аргументов и имеет как «заголовок» и раздел «колонтитул»:

@mixin theme($background-color, $text-color) { 
    .header { 
     background: $background-color; 
    } 

    .footer { 
     background: $background-color; 
     color: $text-color; 
    } 
} 

@include theme(#0f0, white); 

.blue { 
    @include theme(#00f, lightgray); 
} 

.red { 
    @include theme(#f00, gray); 
} 

Составленный CSS из этого примера будет выглядеть следующим образом:

.header { 
    background: lime; 
} 
.footer { 
    background: lime; 
    color: white; 
} 

.blue .header { 
    background: blue; 
} 
.blue .footer { 
    background: blue; 
    color: lightgrey; 
} 

.red .header { 
    background: red; 
} 
.red .footer { 
    background: red; 
    color: gray; 
} 

Answer 2

Вы можете сделать много POWERFULL Color Манипуляции с Саас. Таким образом, можно получить разные темы из одного базового цвета.

http://nex-3.com/posts/89-powerful-color-manipulation-with-sass