<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <div id="foo">
    <div class="header">
      <h1>Plain Header</h1>
      <h1 class="gray">Gray Header</h1>
      <h1 class="blue">Blue Header</h1>
    </div>
  </div>

<section>
  <h1>Normal section h1</h1>
  <p>Normal section paragraph with <a href="#">an anchor</a>.</p>
</section>

<section class="section-dark">
  <h1>Dark section h1</h1>
  <p>Dark section paragraph with <a href="#">an anchor</a>.</p>
</section>

<section class="section-light">
  <h1>Light section h1</h1>
  <p>Light section paragraph with <a href="#">an anchor</a>.</p>
</section>

</body>

</html>
// Code goes here

/*
=========================================== 
example 1: Basic Variables

*/

$gray: #cccccc;
$blue: #1F5673; 

div#foo {
  > div.header {
    h1 {
      &.gray {
        color: $gray;
      }
      &.blue {
        color: $blue;
      }
    }
  }
}



/*
=========================================== 
example 2: Nesting and how it plays with 
qualifiers and style alternates 

*/

$text-size-base: 1rem;

section {
  //-- Common section styles 
  h1, h2, h3, h4, h5 {
    font-size: $text-size-base *2;
    line-height: 1.5;
  }
  p {
    font-size: $text-size-base;
    line-height: 1.2;
  }

  //-- Specific: .section-dark
  &.section-dark {
    $fill: #172A3A;
    $text-base: #759FBC;

    background-color: $fill;

    h1, h2, h3, h4, h5 {
      color: $text-base;
    }
    p {
      color: lighten($text-base, 20%);
    }
    a {
      color: lighten($text-base, 20%);
      &:hover {
        color: $text-base;
      }
    }
  }

  //-- Specific: .section-light
  &.section-light {
    $fill: #D7FFF1;
    $text-base: #285943;

    h1, h2, h3, h4, h5 {
      color: $text-base;
    }
    p {
      color: lighten($text-base, 20%);
    }
    a {
      color: lighten($text-base, 20%);
      &:hover {
        color: $text-base;
      }
    }
  }
}