Beschreibung von Klassen im scss

SassMeister-input-HTML.html

<h1 class="header">Heading</h1>

<!-- modified -->
<h1 class="header header--borderbottom">Heading</h1>
<h1 class="header header--paddingleft">Heading</h1>

<!-- inner Element -->
<h1 class="header">
  <span class="header__linenumber">1.</span>
  Heading
</h1>

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

.header {
  font-size: 2rem;
  background-color: #cccccc;

  &--borderbottom {
    border-bottom: 1px solid red;
  }
  
  &--paddingleft {
    padding-left: 25px;
  }
  
  &__linenumber {
    background-color: green;
    padding-right: 10px;
  }
}

SassMeister-output.css

.header {
  font-size: 2rem;
  background-color: #cccccc;
}
.header--borderbottom {
  border-bottom: 1px solid red;
}
.header--paddingleft {
  padding-left: 25px;
}
.header__linenumber {
  background-color: green;
  padding-right: 10px;
}

SassMeister-rendered.html

<h1 class="header">Heading</h1>

<!-- modified -->
<h1 class="header header--borderbottom">Heading</h1>
<h1 class="header header--paddingleft">Heading</h1>

<!-- inner Element -->
<h1 class="header">
  <span class="header__linenumber">1.</span>
  Heading
</h1>