@extend e eredità in sass | Spiegato

Scrivere un codice CSS pulito e leggibile che non ripeti i valori ridondanti è assolutamente possibile usando fogli di stile sintatticamente fantastico (SASS). Mentre lo styling di elementi su una pagina web ci imbattiamo spesso in una situazione in cui gli elementi sono disegnati in modo simile differisce solo nei dettagli minori. Scrivere un foglio di stile per tali elementi potrebbe rivelarsi molto frenetico perché la quantità di valori ridondanti sarebbe enorme. Per evitare tali situazioni, Sass fornisce la regola @Extend. Questo post discute in dettaglio questa regola.

SASS @Extend Regola ed eredità

Quando i tuoi elementi sono disegnati in modo simile differisce solo nei dettagli minori, allora vorresti ereditare proprietà simili di un elemento a un altro. Ciò è possibile utilizzando la regola @Extend che consente di ereditare le proprietà utilizzate per un selettore a un altro.

Proviamo a capire questa regola e come aiuta a ereditare proprietà CSS simili con l'aiuto di un esempio.

Esempio

Nell'esempio seguente, stiamo assumendo che ci siano più messaggi che appaiono sul nostro sito Web come messaggio di errore, messaggio di avviso, messaggio di successo, ecc. Ai fini di styling di questi elementi stiamo per prima cosa definendo una classe .Message-Standard che contiene tutte le proprietà ridondanti per tutti i tipi di messaggi che compaiono sul nostro sito Web.

Sass

.Message-Standard
imbottitura: 5px;
bordo: 2px grigio solido;
Testo-align: centro;
colore bianco;

Ora questo è lo stile di base che tutti i messaggi avranno, indipendentemente dal loro tipo. Ora quando si tratta di styling di questi messaggi separatamente puoi ereditare queste proprietà da .Classe standard di messaggi insieme alla scrittura di altre proprietà di stile per ogni tipo di messaggio.

Sass

.Message-error
@estendere .Message-Standard;
Background-color: blu;

.Warning dei messaggi
@estendere .Message-Standard;
Background-color: rosso;

.SUCCESSIONE DEL MESSAGGIO
@estendere .Message-Standard;
Background-color: verde;

Ora puoi notare che nello snippet di codice sopra abbiamo usato la regola @Extend per ereditare le proprietà dal .Classe standard di messaggi per modellare ogni tipo di messaggio nel frattempo, dando a ciascuno di essi un colore di sfondo diverso. Questo può risparmiare molto tempo ed energia e il numero di righe di codice si riduce.

Il file di output CSS risultante sembrerà così.

.Message-Standard, .Message-error, .Warning dei messaggi, .SUCCESSIONE DEL MESSAGGIO
imbottitura: 5px;
bordo: 2px grigio solido;
Testo-align: centro;
colore bianco;

.Message-error
Background-color: blu;

.Warning dei messaggi
Background-color: rosso;

.SUCCESSIONE DEL MESSAGGIO
Background-color: verde;

Quando ti riferisci a queste classi nel codice HTML, non è necessario fare riferimento a più classi, è possibile utilizzare le classi assegnate a ciascuno dei messaggi. Ad esempio, non usarlo

, semplicemente usa questo

.

Conclusione

La regola @Extend in SASS ti consente di ereditare proprietà simili quando i tuoi elementi sono disegnati in modo simile differisce solo nei dettagli minori. Puoi definire lo stile di base di tali elementi in una classe e quindi ereditare quella classe usando la regola @Extend in altre classi insieme a uno stile aggiuntivo per quel particolare elemento. L'uso di questa regola può risparmiare molto tempo e ridurre le righe del codice rendendo pulito il codice.