Установите переменную в Sass в зависимости от селектора

Question

У меня есть сайт, который использует несколько разных «основных» цветов. Общая компоновка HTML остается неизменной, только цвета меняются в зависимости от содержимого.

Мне было интересно, могу ли я установить переменную цвета в зависимости от селектора CSS. Таким образом, я могу разместить свой веб-сайт с несколькими переменными и позволить Sass заполнить цвета.

Например:

$color-1: #444; 
$color-2: #555; 
$color-3: #666; 
$color-4: #777; 

body.class-1 { 
    color-default: $color-1; 
    color-main: $color-2; 
} 
body.class-2 { 
    color-default: $color-3; 
    color-main: $color-4; 
} 

/* content CSS */ 
.content { 
    background: $color-default; 
    color: $color-main; 
} 

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

Answer 1

Я думаю, что ответ mixin. (As I wrote, переменный не будет работать.)

@mixin content($color-default, $color-main) { 
    background: $color-default; 
    color: $color-main; 
} 

body.class-1 { 
    @include content(#444, #555); 
} 

body.class-2 { 
    @include content(#666, #777); 
} 

Это SCSS compiles to этого CSS:

body.class-1 { 
    background: #444444; 
    color: #555555; } 

body.class-2 { 
    background: #666666; 
    color: #777777; } 

Если вы хотите сгруппировать значения цветов вместе в файле SCSS, вы могли бы используемые в сочетании с миксином:

$color-1: #444; 
$color-2: #555; 
$color-3: #666; 
$color-4: #777; 

body.class-1 { 
    @include content($color-1, $color-2); 
} 

body.class-2 { 
    @include content($color-3, $color-4); 
} 

Answer 2

Если вы не хотите использовать переменную для каждого цвета, вы можете использовать одну переменную для всех видов цветов. В mixin вы можете выбрать нужный цвет с nth. Например, если вы указали индекс цвета как 1, тогда вы получите первый цвет в цветовой переменной.

$colors: #444, #555, #666, #777; 

@mixin content($color-default-num, $color-main-num) { 
    background: nth($colors, $color-default-num); 
    color: nth($colors, $color-main-num); 
} 

body.class-1 { 
    @include content(1, 2); 
} 

Answer 3

Если вы действительно хотите получить Hacky вы можете также определить ваши различные цветовые схемы в одной переменной, как $scheme1: class1 #333 #444, где первое значение всегда имя, и что следует все цвета в этой схеме.

Вы можете использовать @each:

// Define your schemes with a name and colors 
$scheme1: class1 #444 #555; 
$scheme2: class2 #666 #777; 
$scheme3: class4 #888 #999; 

// Here are your color schemes 
$schemes: $scheme1 $scheme2 $scheme3; 

@each $scheme in $schemes { 
    // Here are the rules specific to the colors in the theme 
    body.#{nth($scheme, 1)} .content { 
    background-color: nth($scheme, 2); 
    color: nth($scheme, 3); 
    } 
} 

Это будет компилировать:

body.class1 .content { 
    background-color: #444444; 
    color: #555555; } 

body.class2 .content { 
    background-color: #666666; 
    color: #777777; } 

body.class4 .content { 
    background-color: #888888; 
    color: #999999; } 

Очевидно, что если вы не хотите, чтобы объединить body.class1 и .content в ваших селекторов, вы можете просто указать mixin content($main, $default) и назовите его внутри @each, используя nth точно так же, как в приведенном выше коде, но дело в том, что вы не есть выписать правило для каждого из ваших классов.

EDIT Есть много интересных ответов на Creating or referencing variables dynamically in Sass и Merge string and variable to a variable with SASS.

Answer 4

Вы также можете создать микширование, использующее селектор ampersand parent.http://codepen.io/juhov/pen/gbmbWJ

@mixin color { 
    body.blue & { 
    background: blue; 
    } 
    body.yellow & { 
    background: yellow; 
    } 
} 

Answer 5

Вы можете просто переопределить переменные SCSS внутри класса-обертки:

$color1: red; 
$color2: yellow; 

header { background: $color1; } 

.override-class { 
    $color1: green; 
    header { background: $color1; } 
} 

Кажется, работает для меня.

Answer 6

UPDATE: его 2017 и переменные действительно работают!

@mixin word_font($page) { 
    @font-face { 
    font-family: p#{$page}; 
    src: url('../../static/fonts/ttf/#{$page}.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
    } 

    .p#{$page} { 
    font-family: p#{$page}; 
    } 
} 

// Loop and define css classes 
@for $i from 1 through 604 { 
@include word_font($i); 
}