export const strings = `
<h1>STRINGS</h1>
<p style="width:70%;">
    Believe it or not, strings play quite a large role in both CSS and Sass ecosystems. Most CSS
    values are either lengths or identifiers, so it actually is quite crucial to stick to some guidelines when dealing
    with strings in Sass.
</p>
<h3>ENCODING</h3>
<p style="width:70%;">
    Make sure it is the very first element of the stylesheet and there is no character of any kind
    before it.
</p>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
@charset 'utf-8';
    </pre>
</div>

<h3>QUOTES</h3>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
// Yep
$direction: 'left';

// Nope
$direction: left;
    </pre>
</div>

<h3>STRINGS AS CSS VALUES</h3>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
// Yep
$font-type: sans-serif;

// Nope
$font-type: 'sans-serif';

// Okay I guess
$font-type: unquote('sans-serif');
    </pre>
</div>

<h3>STRINGS CONTAINING QUOTES</h3>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
// Okay
@warn 'You can\'t do that.';

// Okay
@warn "You can't do that.";
    </pre>
</div>

<h3>URLS</h3>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
// Yep
.foo {{'{'}}
  background-image: url('/images/kittens.jpg');
{{'}'}}

// Nope
.foo {{'{'}}
  background-image: url(/images/kittens.jpg);
{{'}'}}
    </pre>
</div>`;
