Example


$colour-white: #fff;

$colour-red: #ea0043;

$colour-royal-blue: #4032fe;

$colour-mint-green: #5df4cf;

$colour-purple: #340f78;

$colour-dark-purple: #29022c;

$colour-light-grey: #F8F8F8;

$colour-grey: #e8e8e8;

Markup: components/background-colours/background-colours.twig
<br/>
<br/>
<div class="bg--white" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>$colour-white: #fff;</p>

<div class="bg--red" style="height: 100px; width: 100%;"></div>
<p>$colour-red: #ea0043;</p>

<div class="bg--royal-blue" style="height: 100px; width: 100%;"></div>
<p>$colour-royal-blue: #4032fe;</p>

<div class="bg--mint-green" style="height: 100px; width: 100%;"></div>
<p>$colour-mint-green: #5df4cf;</p>

<div class="bg--purple" style="height: 100px; width: 100%;"></div>
<p>$colour-purple: #340f78;</p>

<div class="bg--dark-purple" style="height: 100px; width: 100%;"></div>
<p>$colour-dark-purple: #29022c;</p>

<div class="bg--light-grey" style="height: 100px; width: 100%;"></div>
<p>$colour-light-grey: #F8F8F8;</p>

<div class="bg--grey" style="height: 100px; width: 100%;"></div>
<p>$colour-grey: #e8e8e8;</p>
Source: _cr17-styleguide.scss, line 43