Упростить SCSS mixin в классе

-3

Я ищу более простой/лучший способ изменения некоторых цветов, когда определенный класс применяется к тегу body.Упростить SCSS mixin в классе

Я надеюсь, что вы знаете, что я имею в виду ...

Markup:

<body class="b1"> 
    CONTENT 
</body> 

<body class="b2"> 
    CONTENT 
</body>

SCSS:

// colors 
$b1: #505a73; 
$b2: #aa3333; 
$b3: #484733; 

body.b1 {background: $b1; 
    #div1 {border: 10px solid $b1;} 
    .class1 .label{color: $b1;} 
    #nav li a{color:$b1;border: 4px solid $b1;} 
    #nav2 li a{color:$b1;} 
    #div2 .label {color:$b1;} 
} 

body.b2 {background: $b2; 
    #div1 {border: 10px solid $b2;} 
    .class1 .label{color: $b2;} 
    #nav li a{color:$b2;border: 4px solid $b2;} 
    #nav2 li a{color:$b2;} 
    #div2 .label {color:$b2;} 
} 

body.b3 {background: $b3; 
    #div1 {border: 10px solid $b3;} 
    .class1 .label{color: $b3;} 
    #nav li a{color:$b3;border: 4px solid $b3;} 
    #nav2 li a{color:$b3;} 
    #div2 .label {color:$b3;} 
}

источник

2014-09-08 Lamotta

Значит, вы разбираетесь? http://stackoverflow.com/questions/21882528/unexpected-results-when-using-extend-for-themes или http://stackoverflow.com/questions/14552529/dynamic-sass-variables. – cimmanon

Спасибо, чувак! Только то, что мне нужно :) – Lamotta

Решение @lamotta может быть немного лучше семантически. Однако, возможно, менее сложным решением было бы просто использовать mixin.

$b1: #505a73; 
$b2: #aa3333; 
$b3: #484733; 

@mixin change-colour($class, $colour) { 
    &.#{$class}{ 
     background: $colour; 
     #div1 { 
      border: 10px solid $colour; 
     } 
     .class1 .label{ 
      color: $colour; 
     } 
     #nav li a{ 
      color:$colour; 
      border: 4px solid $colour; 
     } 
     #nav2 li a{ 
      color:$colour; 
     } 
     #div2 .label { 
      color:$colour; 
     } 
    } 
} 

body { 
    @include change-colour(b1, $b1); 
    @include change-colour(b2, $b2); 
    @include change-colour(b3, $b3); 
}

Кроме того, я немного распространил код, но, написав свой код, его гораздо проще читать. Вы можете получить SASS для компиляции мини-версии в любом случае, поэтому мне нравится иметь файлы scss как можно более читаемы для других разработчиков.

источник

2014-09-09 09:04:10 DavidT

Благодаря cimmanon! Этот трюк сделал эту работу:

$base-color: null; // don't touch 

$sections: 
    ( 
     1:(base-color: #505a73), 
     2:(base-color: #aa3333), 
     3:(base-color: #484733), 
     4:(base-color: #878f7a), 
     5:(base-color: #3a3e47), 
     6:(base-color: #887766), 
     7:(base-color: #447755), 
    ); 

@mixin sector-css() { 
    @each $sector, $colors in $sections { 
     $base-color: map-get($colors, base-color) !global; 
     body.b#{$sector} { 
      @content; 
     } 
    } 
} 

@include sector-css() { 
    & {background: $base-color; 
    #div1 {border: 10px solid $base-color;} 
    .class1 .label{color: $base-color;} 
    #nav li a{color:$base-color;border: 4px solid $base-color;} 
    #nav2 li a{color:$base-color;} 
    #div2 .label {color:$base-color;} 
    } 
}

источник

2014-09-08 17:45:17 Lamotta

Упростить SCSS mixin в классе

ответ

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