Cos'è Sass?

Sass, un'estensione di CSS, è l'acronimo di Stylesheet sintatticamente fantastico. Fondamentalmente è un pre-processore di CSS che funziona bene con tutte le versioni di CSS e migliora la capacità del linguaggio di base. È ben noto per risparmiare molto tempo e fatica impedendo ai suoi utenti di utilizzare i valori CSS ridondanti. Questo articolo sottolinea l'importanza di SASS, quindi, per afferrare più conoscenze in merito a leggere l'intero articolo.

Sfondo di Sass

Il foglio di stile sintatticamente fantastico (SASS) è stato originariamente creato da Hampton Catlin ed ampliato da Natalie Weizenbaum nel 2006. Più tardi, Natalie Weizenbaum insieme a Chris Eppstein ha esteso la versione originale a SassScript che è un linguaggio di scripting utilizzato nei file SASS.

Caratteristiche di Sass

Alcune caratteristiche distintive di SASS sono elencate di seguito.

1. SASS è un'estensione CSS basata su JS.
2. Sass lavora in armonia con tutte le versioni di CSS.
3. Ha più potenzialità e stabilità rispetto al CSS.
4. La sintassi di SASS si compila in CSS leggibile.
5. È un preprocessore open source che viene tradotto in CSS.
6. Supporta l'uso di variabili, nidificazione, mixin, ecc.
7. Fornisce direttive di controllo per le librerie e molte funzioni utili per vari valori.
8. I file SASS hanno un file .Estensione SCSS.
9. Commentare in SASS è simile a CSS. Puoi commentare il codice SASS utilizzando / * * /o //.
10. L'output di SASS è completamente strutturata e può essere adattata.

Prerequisiti di Sass

Ai fini della comprensione di Sass in un modo migliore, devi avere una buona comprensione di quanto segue.

1. Html
2. CSS

Qual è l'importanza di Sass

Il significato di SASS può essere evidenziato dal fatto che i fogli di stile Sice possono essere difficili da gestire a causa delle loro dimensioni e complessità, quindi SASS ti consente di strutturare i tuoi fogli di stile più velocemente. Permette l'uso di variabili, nidificazione, mixin, eredità, importazioni, funzioni, ecc.

Come funziona Sass

SASS utilizza un pre-processore per convertire il codice in codice CSS leggibile perché il codice SASS non è comprensibile dal browser Web. Questa procedura di conversione di un codice SASS in CSS viene definita transpilazione e il pre-processore che esegue questa funzione è chiamato transpilatore.

Esempio di Sass

Per capire il funzionamento di SASS segui l'esempio presentato di seguito.

Scenario
Supponiamo che il sito Web che stai sviluppando utilizzi solo due tipi di famiglie di carattere per il testo che appare sulle pagine Web. Ora invece di scrivere i nomi dei familiari più e più volte puoi creare variabili Sass e assegnare loro valori. Successivamente è possibile utilizzare i nomi di quelle variabili ovunque nel file del codice sorgente. Ecco come lo fai.

$ Family_1: Times New Roman;
$ Family_2: Verdana;
.H1
Font-Family: $ Family_2;

.P
Font-Family: $ Family_1;

.Footer
Font-Family: $ Family_1;

Nel codice sopra, abbiamo prima di tutto dichiarato due variabili SASS e assegnato loro i valori desiderati. Ora stiamo usando quelle variabili nel nostro foglio di stile per modellare i nostri vari elementi. Puoi generare variabili SASS in modo simile per altri valori come colore, dimensionamento ecc.

Conclusione

Il foglio di stile sintatticamente fantastico (SASS) è un'estensione di CSS. Fondamentalmente è un pre-processore di CSS che funziona bene con tutte le sue versioni e migliora la capacità del linguaggio di base. Risparmia molto tempo e sforzo impedendo ai suoi utenti di utilizzare i valori CSS ridondanti. Inoltre, ti consente di strutturare i tuoi fogli di stile più velocemente. Questo articolo discute in dettaglio SASS, evidenziando il suo significato insieme alle sue caratteristiche distintive e molto di più.