JSFiddle - React, Tailwind, and code Playground

by Chris Buttery

HTML

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

SCSS

/**
 * Normal -- color defined twice == bad.
 */

$text-color1: #fff;
$bg-color1: #09f;

.foo{
    padding:1em;
    background-color:$bg-color1;
    color:$text-color1;
}
    .foo a{
        color:$text-color1;
    }


/**
 * Quasi-DRY -- color defined once, selector twice == better.
 */
.foo{
    padding:1em;
    background-color:$bg-color1;
}
.foo,
    .foo a{
        color:$text-color1;
    }


/**
 * Sass???
 */

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