JSFiddle - React, Tailwind, and code Playground

by fliptheweb

HTML

<div class=foo>
    <p>This is <a href=#>a link</a>!</p>
</div>

SCSS

/**
 * Normal -- color defined twice == bad.
 */
.foo{
    padding:1em;
    background-color:#09f;
    color:#fff;
}
    .foo a{
        color:#fff;
    }


/**
 * Quasi-DRY -- color defined once, selector twice == better.
 */
.foo{
    padding:1em;
    background-color:#09f;
}
.foo,
    .foo a{
        color:#fff;
    }


/**
 * Sass
 * with %placeholder, compile to your 2nd variant
*/
%color-box {
    color: #fff;
}
.foo{
    padding: 1em;
    background-color: #09f;
    @extend %color-box;
    a {
        @extend %color-box;   
    }
}

/**
 * Sass
 * with nested mixin, if you have many block with differently color
*/
@mixin color-box-with-link($color) {
    color: $color;
    a {
        color: $color;
    }        
}
.foo {
    @include color-box-with-link(#09f);
}
.bar {
    @include color-box-with-link(#000);
}

JavaScript

/**
 * Writing the color twice is bad as the color is subject to change.
 * 
 * Writing the selector twice is not as bad as it is a *lot* less
 * likely to change than the color is.
 * 
 * Is there a nice, simple way to write both only once with Sass?
 */