Sass @extend i dziedziczenie

Instrukcja @extend Sass

Instrukcja @extend instrukcja pozwala na udostępnienie zbioru atrybutów CSS z jednego selektora do innego.

Jeśli masz elementy prawie o tym samym stylu, ale różnią się jedynie w kilku małych szczegółach, to Instrukcja @extend instrukcja jest bardzo użyteczna.

Poniższy przykład Sass tworzy podstawowy styl przycisku (ten styl będzie używany dla większości przycisków). Następnie, tworzymy styl dla przycisku "Raport" oraz dla przycisku "Zatwierdź". Przyciski "Raport" i "Zatwierdź" są tworzone poprzez Instrukcja @extend Instrukcja dziedziczy wszystkie atrybuty CSS klasy .przycisk-bazowy. Ponadto, definiują one swoje kolory:

Gramatyka SCSS:

.przycisk-bazowy  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  @rozszerz .przycisk-bazowy;
  background-color: red;
}
.button-submit  {
  @rozszerz .przycisk-bazowy;
  background-color: green;
  color: white;
}

Po skompilowaniu, CSS będzie wyglądał tak:

Wyjście CSS：

.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  background-color: red;
}
.button-submit  {
  background-color: green;
  color: white;
}

Poprzez użycie Instrukcja @extend Nie musisz przypisywać wielu klas do elementów HTML, na przykład:<button class="button-basic button-report">Zgłoś to</button>. Wystarczy指定 .button-report aby uzyskać dwa zestawy stylów.

Instrukcja @extend Instrukcje pomagają utrzymać twoje kod Sass bardzo suchy (DRY).