Search code examples
htmlcsssassmixins

Simplify SCSS mixin on class


I'm looking for a simpler/better way for changing some colors when a certain class is applied to the body tag.

I hope you know what i mean...

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

Solution

  • @lamotta solution may be slightly better semantically. However maybe a less complex solution would be just to use a 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);
    }
    

    Also, I have spread the code out a little but by writing your code like that its much easier to read. You can get SASS to compile a minified version anyway so I like to have my scss files as readable as possible for other developers.