Incorporazione @ e Ereditarietà Sass

Istruzione @extend Sass

Istruzione @extend permette di condividere un insieme di proprietà CSS da un selettore all'altro.

Se hai elementi con uno stile quasi identico, ma con alcune differenze minime, allora Istruzione @extend è molto utile.

L'esempio di Sass seguente crea uno stile di base per i pulsanti (questo stile verrà utilizzato per la maggior parte dei pulsanti). Poi, creiamo uno stile per il pulsante "Report" e uno per il pulsante "Submit". I pulsanti "Report" e "Submit" attraverso Istruzione @extend Le istruzioni estendono tutte le proprietà CSS della classe .button-basic. Inoltre, definiscono i propri colori:

Sintassi SCSS:

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

Dopo la compilazione, il CSS sarà come segue:

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

Utilizzando Istruzione @extend Non è necessario specificare più classi per gli elementi del codice HTML, ad esempio:<button class="button-basic button-report">Report this</button>. Basta specificare .button-report per ottenere due gruppi di stili.

Istruzione @extend L'istruzione aiuta a mantenere il codice Sass molto asciutto (DRY).