<div id="rgba">
  <h2>RGBA for HEX colour codes in SCSS</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim elit ac varius rhoncus. Aenean nec eleifend dolor, et sollicitudin purus. Pellentesque eget ultrices nisi. Aliquam aliquet tellus at condimentum venenatis. Nulla ac faucibus elit. Pellentesque posuere tempus nisi, ullamcorper sollicitudin urna aliquet eget. Quisque sed pellentesque tellus, at pretium mauris. Etiam ornare, sem sit amet laoreet porttitor, dolor urna euismod dolor, ac laoreet urna risus non erat.</p>
</div>

<div id="nest">
  <h2>Nested media queries</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim elit ac varius rhoncus. Aenean nec eleifend dolor, et sollicitudin purus. Pellentesque eget ultrices nisi. Aliquam aliquet tellus at condimentum venenatis. Nulla ac faucibus elit. Pellentesque posuere tempus nisi, ullamcorper sollicitudin urna aliquet eget. Quisque sed pellentesque tellus, at pretium mauris. Etiam ornare, sem sit amet laoreet porttitor, dolor urna euismod dolor, ac laoreet urna risus non erat.</p>
</div>

<div id="color-maths">
  <h2>Add colours together</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim elit ac varius rhoncus. Aenean nec eleifend dolor, et sollicitudin purus. Pellentesque eget ultrices nisi. Aliquam aliquet tellus at condimentum venenatis. Nulla ac faucibus elit. Pellentesque posuere tempus nisi, ullamcorper sollicitudin urna aliquet eget. Quisque sed pellentesque tellus, at pretium mauris. Etiam ornare, sem sit amet laoreet porttitor, dolor urna euismod dolor, ac laoreet urna risus non erat.</p>
</div>

$paragraphBackground: #F22;

div {
  width: 100%;
  @media screen and (min-width: 800px) {
    margin: 0 auto;
    max-width: 960px;
  }
  &#color-maths {
    p {
       border: 5px solid ($paragraphBackground*2 + #888);
    }
  }
}
p {
  background-color: rgba($paragraphBackground, 0.1);
  padding: 20px;
}