Question

当某个类应用于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;}
}

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

Answer 2

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

在课堂上简化SCSS mixin

2 个答案: