Sass @extend och arv

Sass @extend-instruktion

@extend instruktioner låter dig dela en uppsättning CSS-attribut från en väljare till en annan väljare.

Om du har element med nästan samma stil, men med små skillnader i vissa detaljer, då @extend instruktioner är mycket användbara.

Nedanstående Sass-exempel skapar först en grundläggande stil för knappen (denna stil används för de flesta knappar). Sedan skapar vi en stil för "Report"-knappen och en stil för "Submit"-knappen. "Report"- och "Submit"-knapparna används genom @extend Instruktioner ärver alla CSS-attribut från .button-basic-klassen. Dessutom definierar de egna färger:

SCSS syntax:

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

Efter kompilering kommer CSS att se ut så här:

CSS-utdata:

.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;
}

Genom att använda @extend anvisning, du behöver inte specificera flera klasser för element i HTML-koden, till exempel: <button class="button-basic button-report">Rapportera detta</button>. Du behöver bara specificera .button-report för att få två uppsättningar stilar.

@extend Anvisningar hjälper till att hålla ditt Sass-kod mycket torr (DRY).