sass
Estendere / Ereditarietà

Sintassi

• @extend .<className>
• @extend .<className>, .<className>
• @extend .<className> !optional
• @extend .<className>, .<className> !optional

Parametri

Osservazioni

Estendi una classe

.message
  color: white

.message-important
  @extend .message
  background-color: red

Questo prenderà tutti gli stili da .message e li aggiungerà a .message-important . Genera il seguente CSS:

.message, .message-important {
  color: white;
}

.message-important {
  background-color: red;
}

Estendi da più classi

.message
  color: white

.important
  background-color: red

.message-important
  @extend .message, .important

Nel codice precedente @extend è usato in una riga per aggiungere codice di classi multiple a .message-important , tuttavia, è possibile usare una estensione per riga come questa:

.message-important
    @extend .message
    @extend .important

Uno di questi metodi genererà il seguente CSS:

.message, .message-important {
  color: white;
}

.important, .message-important {
  background-color: red;
}

Il concatenamento si estende

.message
  color: white
  background: black

.message-important
  @extend .message
  font-weight: bold

.message-error
  @extend .message-important
  font-style: italic

Questo codice causa l' .message-error .message-important da estendere da .message-important , il che significa che conterrà il codice da entrambi .message-important e .message , poiché .method-important estende da .message . Ciò si traduce nel seguente CSS:

.message, .message-important, .message-error {
  color: white;
  background: black;
}

.message-important, .message-error {
  font-weight: bold;
}

.message-error {
  font-style: italic;
}

Dichiarazione di non responsabilità: assicurati che le classi che stai estendendo si verifichino solo una volta nel codice, altrimenti Sass potrebbe generare un CSS complicato e contorto.

Estensioni opzionali

A volte, potresti desiderare che @extend sia facoltativo e non richieda che la classe specificata esista nel tuo codice.

.message-important
  @extend .message !optional
  background: red

Ciò comporterà il seguente CSS:

.message-important {
  background: red;
}

Dichiarazione di non responsabilità: è utile durante lo sviluppo quando potresti non aver ancora scritto tutto il codice e non vuoi errori, ma probabilmente dovrebbe essere rimosso in produzione perché potrebbe portare a risultati imprevisti.

segnaposto

A volte creerai le classi che non saranno utilizzate a pieno titolo, ma che saranno estese solo all'interno di altre serie di regole. Ciò significa che il file CSS compilato sarà più grande di quanto dovrebbe essere. I selettori segnaposto risolvono questo problema.

I selettori segnaposto sono simili ai selettori di classe, ma utilizzano il carattere percentuale (%) anziché il (.) Utilizzato per le classi. Non verranno visualizzati nel CSS compilato.

%button {
    border: 5px solid black;
    border-radius: 5px;
    margin: 0;
} 

.error-button {
    @extend %button;
    background-color: #FF0000;
}

.success-button {
    @extend %button;
    background-color: #00FF00;
}

Questo compilerà il seguente CSS:

.error-button, .success-button {
    border: 5px solid black;
    border-radius: 5px;
    margin: 0;
}

.error-button {
    background-color: #FF0000;
}

.success-button {
    background-color: #00FF00;
}

Estendere il genitore

In genere cercando di estendere il genitore in questo modo:

.parent {
  style: value;

  @extend &;
}

Risulterà un errore, affermando che il genitore non può essere esteso. Questo ha senso, ma c'è una soluzione alternativa. Basta memorizzare il selettore genitore in una variabile.

.parent {
  $parent: &;
  style: value;
  @extend #{&};
}

Non c'è alcun vantaggio nel fare questo nell'esempio sopra, tuttavia questo ti dà il potere di avvolgere gli stili genitore da un mixin incluso.