Using the ampersand operator in Sass

SassMeister-input-HTML.html

<div class="container">
  <h1>Nesting with the Ampersand Operator</h1>
  <a href="#">It's common to use & on link styles.</a>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices, justo vel vulputate viverra, tortor nulla porta sem</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices, justo vel vulputate viverra, tortor nulla porta sem</p>
  <p class="container__note">Here is a different kind of ampersand usage.</p>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----

$off-black: #4d4d4d;

.container {
  a {
    text-decoration: underline;
    &:hover {
      color: yellow;
      background-color: $off-black;
      text-decoration: none;
    }
  }
  p {
    &:first-of-type {
      color: orange;
    }
  }
  
  &__note {
    background-color: gray;
    padding: 5px;
    color: white;
  }
}

SassMeister-output.css

.container a {
  text-decoration: underline;
}
.container a:hover {
  color: yellow;
  background-color: #4d4d4d;
  text-decoration: none;
}
.container p:first-of-type {
  color: orange;
}
.container__note {
  background-color: gray;
  padding: 5px;
  color: white;
}

SassMeister-rendered.html

<div class="container">
  <h1>Nesting with the Ampersand Operator</h1>
  <a href="#">It's common to use & on link styles.</a>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices, justo vel vulputate viverra, tortor nulla porta sem</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices, justo vel vulputate viverra, tortor nulla porta sem</p>
  <p class="container__note">Here is a different kind of ampersand usage.</p>
</div>