Sass @extend og arv

Sass @extend-instruktion

@extend instruktioner lader dig dele en gruppe CSS-ejenskaber fra en selector til en anden selector.

Hvis du har elementer med næsten samme stil, men kun små forskelle i nogle detaljer, så @extend instruktioner er meget nyttige.

Følgende Sass-eksempel opretter først en grundlæggende stil til knappen (denne stil bruges til de fleste knapper). Derefter opretter vi en stil til "Report"-knappen og en stil til "Submit"-knappen. "Report" og "Submit"-knapperne bruger @extend Instruktioner arver alle CSS-ejenskaber fra .button-basic-klassen. Derudover definerer de også egne farver:

SCSS syntaks:

.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 vil CSS se sådan ud:

CSS output:

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

Ved brug af @extend Instruktioner, hvor du ikke behøver at specificere flere klasser for elementer i HTML-koden, f.eks.: <button class="button-basic button-report">Rapportér dette</button>. Du behøver kun at specificere .button-report for at få to stilgrupper.

@extend Instruktioner hjælper med at holde din Sass kode meget tør (DRY).