Создание mixin для цветов тем

Я установил класс тела как дескриптор целевых страниц и применил правильные цвета через мою таблицу стилей. Класс тела, например <body class="theme-red">, и я в настоящее время имеют следующие классы, установленные в моем файле SCSS:Создание mixin для цветов тем

.theme-border-colors { 
    .theme-tourquoise & { 
     border-color:$turquoise; 
    } 
    .theme-red & { 
     border-color:$red; 
    } 
    .theme-yellow & { 
     border-color:$yellow; 
    } 
    .theme-green & { 
     border-color:$green; 
    } 
    .theme-blue & { 
     border-color:$blue; 
    } 
    .theme-brown & { 
     border-color:$brown; 
    } 
    .theme-pink & { 
     border-color:$pink; 
    } 
} 
.theme-background-colors { 
    .theme-tourquoise & { 
     background-color:$turquoise; 
    } 
    .theme-red & { 
     background-color:$red; 
    } 
    .theme-yellow & { 
     background-color:$yellow; 
    } 
    .theme-green & { 
     background-color:$green; 
    } 
    .theme-blue & { 
     background-color:$blue; 
    } 
    .theme-brown & { 
     background-color:$brown; 
    } 
    .theme-pink & { 
     background-color:$pink; 
    } 
} 
.theme-font-colors { 
    .theme-tourquoise & { 
     color:$turquoise; 
    } 
    .theme-red & { 
     color:$red; 
    } 
    .theme-yellow & { 
     color:$yellow; 
    } 
    .theme-green & { 
     color:$green; 
    } 
    .theme-blue & { 
     color:$blue; 
    } 
    .theme-brown & { 
     color:$brown; 
    } 
    .theme-pink & { 
     color:$pink; 
    } 
}

Может Mixin быть сделаны, чтобы включить все 3 из них, когда это необходимо в моих SCSS файлах. I ток @extend .theme-font-colors и т. Д.

источник

2014-01-21 Rob Morris

Что случилось с тем, что вы сейчас имеете, если знаете, что это работает? – cimmanon

Ничего! Просто задавался вопросом, было ли это более эффективным или возможным для того, чтобы быть миксином? Расширение всех трех классов отлично работает. –

Вы можете создать список имен и цветов. Оформить заказ на этот код:

$border-colors: black #333333, red #ff0000, white #ffffff; 
$background-colors: black #333333, red #ff0000, white #ffffff; 

@mixin list-parser($var){ 
    @each $item in $var { 
    .theme-#{nth($item, 1)} & { 
     border-color: nth($item, 2); 
    } 
    } 
} 

.theme-border-colors { 
    @include list-parser($border-colors); 
} 

.theme-background-colors { 
    @include list-parser($background-colors); 
}

источник

2014-01-21 16:18:43

Создание mixin для цветов тем

ответ

Смежные вопросы