Sass !default

example showing how to use !default

by Sarah Giles

HTML

<p>Each color is defined twice. First with a dark color then with a lighter tint.</p> 
<div class="box foo1">
	<h4>This is Blue</h4>
    <p>Lighter color is used</p>
</div>
<div class="box foo2">
	<h4>This is Purple</h4>
  <p>The second color is not used as it is set to !default;</p>
</div>

<div class="box bar3a">
	<h4>This is Red</h4>
  <p>Here $foo3 has first been set to dark red then this class was defined so it is dark red</p>
</div>
<div class="box bar3b">
	<h4>This is Red</h4>
  <p>However $foo3 was then changed to pink and after that this class was defined. Now we have to classes tha use the same variable but get different results</p>
</div>

<div class="box bar4a">
	<h4>This is green</h4>
  <p>As with the above Red the green does the same with one exception. The second color definition uses !default so both boxes are the dark green</p>
</div>
<div class="box bar4b">
	<h4>This is green</h4>
  <p></p>
</div>

SCSS

//blue
$foo1: #01307c;
$foo1: #659bf2;

//purple
$foo2: #4b0196; 
$foo2: #cca4f4 !default;



.box{ width 100%; min-height:50px;color:white}

.foo1{background-color:$foo1}
.foo2{background-color:$foo2}


//Red Split
$foo3:#820310;
.bar3a{background-color:$foo3}
$foo3:#ef838e; 
.bar3b{background-color:$foo3}

//green Split
$foo4:#02663c;
.bar4a{background-color:$foo4}
$foo4:#b6e08f !default; 
.bar4b{background-color:$foo4}