export const colors = `<h1>COLORS</h1>
<p style="width:70%;">
    Colors occupy an important place in the CSS language. Naturally, Sass ends up being a
    valuable ally when it comes to manipulating colors, mostly by providing a handful of powerful functions.
</p>
<h3>COLOR FORMATS</h3>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; margin-bottom:8px">
    <pre>
// Yep
.foo {{'{'}}
color: hsl(0, 100%, 50%);
{{'}'}}

// Also yep
.foo {{'{'}}
color: rgb(255, 0, 0);
{{'}'}}

// Meh
.foo {{'{'}}
color: #f00;
{{'}'}}

// Nope
.foo {{'{'}}
color: #FF0000;
{{'}'}}

// Nope
.foo {{'{'}}
color: red;
{{'}'}}
    </pre>
</div>

<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; margin-bottom:8px">
    <pre>
// Yep
.foo {{'{'}}
color: rgba(0, 0, 0, 0.1);
background: hsl(300, 100%, 100%);
{{'}'}}

// Nope
.foo {{'{'}}
color: rgba(0,0,0,0.1);
background: hsl( 300, 100%, 100% );
{{'}'}}
    </pre>
</div>

<h3>COLORS AND VARIABLES</h3>
<p style="width:70%;">When using a color more than once, store it in a variable with a meaningful name representing the
    color.</p>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
$sass-pink: hsl(330, 50%, 60%);
$main-theme-color: $sass-pink;
</pre>
</div>
`;
