Ricerca…


Sintassi

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

Parametri

Parametro Dettagli
nome della classe La classe che vuoi estendere.

Osservazioni

La regola Sass di @extend ti consente di condividere le proprietà CSS su più classi, mantenendo il codice DRY e più facile da leggere.

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.



Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow