[HTML|JS|CSS] Sass : Dziedziczenie selektorów

Podczas stylowania kontrolek w CSS, często dodajemy nowe style tylko po to, aby rozszerzyć istniejący styl o jakąś cechę. Twórcy Sass wprowadzili mechanizm dziedziczenia styli, dzięki któremu pisanie hierarchii styli staje się przyjemne i znacznie zmniejsza ilość kodu. Aby dziedziczyć z jednego selektora, w drugim, wystarczy dodać instrukcję @extends i podać nazwę stylu. W przypadku definiowania dwóch tych samych właściwości istnieje zasada podobna jak w przypadku mixinów : zastosowana zostanie ostatnia zdefiniowana wartość.

Czytelny kod Sass:

.btn-base
{
 padding: 10px 10px 10px 10px;
 &:hover{
  background-color : #FFFFFF;
 };
}

.yellow-btn
{
 @extend .btn-base;
 padding-top: 20px;
 background-color : #FFFF00;
}

...zostanie przetłumaczona do CSS w następujący sposób:

.btn-base, .yellow-btn {
  padding: 10px 10px 10px 10px; }
  .btn-base:hover, .yellow-btn:hover {
    background-color: #FFFFFF; }

.yellow-btn {
  padding-top: 20px;
  background-color: #FFFF00; }

Zwiększenie czytelności i utrzymymwalności kodu nie podlega wątpliwości.