export const numbers = `
<h1>NUMBERS</h1>
<p style="width:70%;">In Sass, number is a data type including everything from unitless numbers to lengths, durations,
    frequencies, angles and so on. This allows calculations to be run on such measures.</p>
<h3>ZEROS</h3>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
// Yep
.foo {{'{'}}
  padding: 2em;
  opacity: 0.5;
{{'}'}}

// Nope
.foo {{'{'}}
  padding: 2.0em;
  opacity: .5;
{{'}'}}
    </pre>
</div>

<h3>UNITS</h3>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; margin-bottom: 8px; ">
    <pre>
// Yep
$length: 0;

// Nope
$length: 0em;
    </pre>
</div>

<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; margin-bottom: 8px;">
    <pre>
$value: 42;

// Yep
$length: $value * 1px;

// Nope
$length: $value + px;
    </pre>
</div>

<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; margin-bottom: 8px;">
    <pre>
$length: 42px;

// Yep
$value: $length / 1px;

// Nope
$value: str-slice($length + unquote(''), 1, 2);
    </pre>
</div>

<h3>CALCULATIONS</h3>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
// Yep
.foo {{'{'}}
  width: (100% / 3);
{{'}'}}

// Nope
.foo {{'{'}}
  width: 100% / 3;
{{'}'}}
    </pre>
</div>

<h3>MAGIC NUMBERS</h3>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 70%; ">
    <pre>
/**
 * 1. Magic number. This value is the lowest I could find to align the top of
 * '.foo' with its parent. Ideally, we should fix it properly.
 */
.foo {{'{'}}
  top: 0.327em; /* 1 */
{{'}'}}
    </pre>
</div>`;
