JSFiddle - React, Tailwind, and code Playground

by csswizardry

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 -- perfect! Thanks to @jitendravyas et al!
*/
.foo{
    padding:1em;
    background-color:#09f;
    
    &,
    a{
        color:#fff;
    }
}

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?
 */