Come nidificare le regole e le proprietà in Sass?

Acronimo di SASS per il foglio di stile sintatticamente fantastico è un pre-processore e l'estensione di CSS che funziona bene con tutte le versioni di CSS. È ben noto per la sua sintassi pulita e ben strutturata che, di conseguenza, migliora la capacità del linguaggio di base. SASS facilita i suoi utenti supportando l'uso di variabili, nidificazione, mixin, eredità, ecc. L'argomento in discussione in questo articolo è nidificante in Sass. Qui dimostreremo come puoi nidificare le regole e le proprietà in Sass.

Come nidificare le regole in Sass

La nidificazione è considerata come la procedura di combinazione di varie regole. SASS consente ai suoi utenti di nidificare le regole, impedendo di scrivere più e più volte i selettori esterni, rendendo il codice chiaro e più leggibile del CSS di base.

Esempio
L'esempio dimostrato di seguito mostra come viene eseguita la nidificazione in SASS.

Html

• Casa
>

• Servizi


• Chi siamo


• Contattaci

Nel codice sopra, stiamo creando una barra laterale creando un contenitore di div e nidificando un elenco non ordinato al suo interno. Inoltre, abbiamo anche fornito il collegamento del file CSS generato dopo aver compilato il nostro file SASS sull'attributo HREF del tag.

Sass

div
Float: a sinistra;
larghezza: 25%;
Background-color: Rosybrown;
imbottitura: 25px 15px;
ul
tipo elenco: nessuno;
Margine: 0;
imbottitura: 0;

li
imbottitura: 8px;
margine-bottom: 15px;
Background-color: prugna;
colore bianco;

Ora noterai che nel file SASS stiamo prima accumulando il nostro contenitore di div e quindi nidificando i nostri selettori UL e LI all'interno del selettore Div. Tuttavia, lo stesso codice sopra nel CSS standard assomigliarebbe a questo.

CSS

div
Float: a sinistra;
larghezza: 25%;
Background-color: Rosybrown;
imbottitura: 25px 15px;

Div ul
tipo elenco: nessuno;
Margine: 0;
imbottitura: 0;

Div li
imbottitura: 8px;
margine-bottom: 15px;
Background-color: prugna;
colore bianco;

Nel codice sopra, vedrai che dobbiamo usare il selettore Div con ogni altro selettore per modellare i nostri vari elementi. In CSS, non puoi nidificare i selettori/le regole l'uno nell'altro piuttosto che devi definirli uno per uno.

Questo è il vantaggio che SASS ha su CSS che impedisce ai suoi utenti di ripetere i selettori ridondanti che rendono il codice chiaro e più leggibile. L'output dell'esempio sopra è mostrato di seguito.

Produzione

È stata generata e disegnata una barra laterale usando la nidificazione in Sass.

Come nidificare le proprietà in Sass

Un altro vantaggio di SASS è che consente anche la nidificazione delle proprietà. Devi aver notato che il prefisso di varie proprietà CSS è lo stesso come, a dimensioni di font, caramella-familiare, font-weight, ecc. Il carattere prefisso è lo stesso in queste proprietà.

Ora per evitare di usare questo prefisso ancora e ancora nel tuo foglio di stile puoi nidificare queste proprietà in Sass. Ti stai chiedendo come farlo. Consultare l'esempio di seguito.

Esempio
Questo esempio mostra come nidificare le proprietà in Sass.

Html

Questo è un po 'di paragrafo.

Nel codice sopra, abbiamo semplicemente creato un paragrafo.

Sass

corpo
sfondo:

Colore: rosa;
Allegato: fisso;


P
font:

Famiglia: Verdana;
dimensione: 20px;
Peso: audace;

Ora noterai nel codice sopra che durante lo styling dei nostri elementi con varie proprietà CSS abbiamo scritto il prefisso una volta e poi nidificato le proprietà relative a quel prefisso all'interno del selettore. In questo modo abbiamo evitato di scrivere più e più volte lo stesso prefisso.

CSS

Questo è l'output CSS transito.

Produzione

Gli elementi sono stati disegnati con successo usando la nidificazione in Sass.

Conclusione

Ai fini delle regole di nidificazione in Sass devi solo scrivere il selettore esterno una volta e nidificare il resto dei selettori al suo interno. Nel frattempo, le proprietà di nidificazione in SASS consentono di scrivere una volta il prefisso delle proprietà e nidificare le proprietà correlate al suo interno. Le regole di nidificazione e le proprietà in SASS ti impediscono di scrivere ripetutamente valori CSS ridondanti rendendo il tuo codice chiaro e più leggibile. Questo articolo ti guida su come nidificare le regole e le proprietà in Sass.