sass
Estendere / Ereditarietà
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.