export const abstract = `
<h1>STYLEGUIDE</h1>
<p style="width:70%;">
    With more people than ever writing in Sass, it bears some consideration how we format it. CSS
    style guides are common, so perhaps we can extend those to cover choices unique to Sass.
</p>

<h3>List @extend(s) First</h3>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
.weather {{'{'}}
    @extend %module;
    ...
  {{'}'}}
    </pre>
</div>

<h3>List @include(s) Next</h3>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
.weather {{'{'}}
    @extend %module;
    @include transition(all 0.3s ease-out);
    ...
  {{'}'}}
    </pre>
</div>

<h3>List "Regular" Styles Next</h3>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
.weather {{'{'}}
    @extend %module;
    @include transition(all 0.3s ease-out);
    background: LightCyan;
    ...
  {{'}'}}
    </pre>
</div>

<h3>Nested Pseudo Classes and Pseudo Elements Next</h3>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
.weather {{'{'}}
    @extend %module;
    @include transition(all 0.3s ease-out);
    background: LightCyan;
    &:hover {{'{'}}
      background: DarkCyan;
    {{'}'}}
    &::before {{'{'}}
      content: "";
      display: block;
    {{'}'}}
    ...
  {{'}'}}
    </pre>
</div>

<h3>Nested Selectors Last</h3>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
.weather {{'{'}}
    @extend %module;
    @include transition(all 0.3s ease-out);
    background: LightCyan;
    &:hover {{'{'}}
      background: DarkCyan;
    {{'}'}}
    &::before {{'{'}}
      content: "";
      display: block;
    {{'}'}}
    > h3 {{'{'}}
      @include transform(rotate(90deg));
      border-bottom: 1px solid white;
    {{'}'}}
    ...
  {{'}'}}
    </pre>
</div>

<h3>Maximum Nesting: Three Levels Deep</h3>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
.weather {{'{'}}
  .cities {{'{'}}
    li {{'{'}}
      // no more!
    {{'}'}}
  {{'}'}}
{{'}'}}
    </pre>
</div>

<h3>Maximum Nesting: Three Levels Deep</h3>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
/* Vendor Dependencies */
@import "compass";

/* Authored Dependencies */
@import "global/colors";
@import "global/mixins";

/* Patterns */
@import "global/tabs";
@import "global/modals";

/* Sections */
@import "global/header";
@import "global/footer";
    </pre>
</div>

<h3>Break Into As Many Small Files As Makes Sense</h3>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
...

@import "global/header/header/";
@import "global/header/logo/";
@import "global/header/dropdowns/";
@import "global/header/nav/";
@import "global/header/really-specific-thingy/";
    </pre>
</div>

<h3>Be Generous With Comments</h3>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
.overlay {{'{'}}
  // modals are 6000, saving messages are 5500, header is 2000
  z-index: 5000;
{{'}'}}
    </pre>
</div>

<h3>Variablize All Common Numbers, and Numbers with Meaning</h3>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
$zHeader: 2000;
$zOverlay: 5000;
$zMessage: 5050;

.header {{'{'}}
  z-index: $zHeader;
{{'}'}}
.overlay {{'{'}}
  z-index: $zOverlay;
{{'}'}}
.message {{'{'}}
  z-index: $zMessage;
{{'}'}}
    </pre>
</div>

<h3>Nest and Name Your Media Queries</h3>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
.sidebar {{'{'}}
  float: right;
  width: 33.33%;
  @include bp(mama-bear) {{'{'}}
    width: 25%;
  {{'}'}}
{{'}'}}
    </pre>
</div>

<h3>Shame Last</h3>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
.@import "compass"

...

@import "shame"
    </pre>
</div>
`;
