简化类上的 SCSS mixin答案

【问题标题】：Simplify SCSS mixin on class简化类上的 SCSS mixin
【发布时间】：2014-11-01 22:29:47
【问题描述】：

我正在寻找一种更简单/更好的方法来在将某个类应用于 body 标签时更改某些颜色。

我希望你知道我的意思...

标记：

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

【问题讨论】：

所以你在主题化？ stackoverflow.com/questions/21882528/… 或 stackoverflow.com/questions/14552529/dynamic-sass-variables.
谢谢老兄！正是我需要的:)

标签： html css sass mixins

【解决方案1】：

@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 文件对其他开发人员尽可能可读。

【讨论】：

【解决方案2】：

感谢西马农！这个技巧成功了：

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

【讨论】：