export const selectorNesting = `
<h1>SELECTOR NESTING</h1>
<p style="width:70%;">One particular feature Sass provides that is being overly misused by many developers
    is selector nesting. Selector nesting offers a way for stylesheet authors to compute long selectors by
    nesting shorter selectors within each others.</p>

<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%;">
    <pre>
.foo{{' {'}}
    .bar{{' {'}}
      &:hover{{' {'}}
        color: red;
      {{'}'}}
    {{'}'}}
  {{'}'}}
    </pre>
</div>

<p style="width:70%;">... will generate this CSS: </p>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
.foo .bar:hover{{' {'}}
    color: red;
  {{'}'}}
    </pre>
</div>

<p style="width:70%;">Along the same lines, since Sass 3.3 it is possible to use the current selector
    reference (&) to generate advanced selectors. For instance:</p>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
.foo{{' {'}}
    &-bar{{' {'}}
      color: red;
    {{'}'}}
  {{'}'}}
    </pre>
</div>
<p style="width:70%;">... will generate this CSS: </p>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
.foo-bar{{' {'}}
    color: red;
  {{'}'}}
    </pre>
</div>
<h3>EXCEPTIONS</h3>
<p style="width:70%;">For starters, it is allowed and even recommended to nest pseudo-classes and
    pseudo-elements within the initial selector.</p>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
.foo{{' {'}}
    color: red;

    &:hover{{' {'}}
      color: green;
    {{'}'}}

    &::before{{' {'}}
      content: 'pseudo-element';
    {{'}'}}
  {{'}'}}
    </pre>
</div>
<p style="width:70%;">Using selector nesting for pseudo-classes and pseudo-elements not only makes sense
    (because it deals with closely related selectors), it also helps keep everything about a component at
    the same place.
</p>
<p style="width:70%;">
    Also, when using component-agnostic state classes such as .is-active, it is perfectly fine to
    nest it under the component’s selector to keep things tidy.</p>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
.foo{{' {'}}
    // …

    &.is-active{{' {'}}
      font-weight: bold;
    {{'}'}}
  {{'}'}}
    </pre>
</div>
<p style="width:70%;">
    Last but not least, when styling an element because it happens to be contained within another
    specific element, it is also fine to use nesting to keep everything about the component at the same place.
</p>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
.foo {{'{'}}
    // …

    .no-opacity & {{'{'}}
      display: none;
    {{'}'}}
  {{'}'}}
    </pre>
</div>`;
