Nesting classes and Elements in Sass

SassMeister-input-HTML.html

<div>
  <h1>Nesting classes and elements</h1>
  <p>Elements and classes can be nested. Here we nested a paragraph tag. <a href="#">Links can be nested too.</a></p>
  <p class="highlighted-text">Classes can be nested too!</p>
</div>

SassMeister-input.scss

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

// set a global variable
$myColor: #4d4d4d;

div {
  p {
    color: $myColor;
  }
  
  a {
    color: $myColor;
    text-decoration: underline;
  }
  
  .highlighted-text {
    color: pink;
  }
}

SassMeister-output.css

div p {
  color: #4d4d4d;
}
div a {
  color: #4d4d4d;
  text-decoration: underline;
}
div .highlighted-text {
  color: pink;
}

SassMeister-rendered.html

<div>
  <h1>Nesting classes and elements</h1>
  <p>Elements and classes can be nested. Here we nested a paragraph tag. <a href="#">Links can be nested too.</a></p>
  <p class="highlighted-text">Classes can be nested too!</p>
</div>