SASS (Syntactically Awesome Stylesheet) è un pre-processore CSS che aiuta a ridurre la ripetizione con CSS e fa risparmiare tempo. È un linguaggio di estensione CSS più stabile e potente che descrive lo stile del documento in modo pulito e strutturale.
È un linguaggio di pre-elaborazione che fornisce una sintassi indentata (la propria sintassi) per i CSS.
Consente di scrivere codice in modo più efficiente e facile da mantenere.
È un super set di CSS che contiene tutte le funzionalità dei CSS ed è un pre-processore open source, codificato in Ruby.
Fornisce lo stile del documento in un buon formato di struttura rispetto al CSS piatto.
Utilizza metodi riutilizzabili, istruzioni logiche e alcune delle funzioni integrate come la manipolazione del colore, la matematica e gli elenchi di parametri.
È più stabile, potente e compatibile con le versioni di CSS.
È un super set di CSS e si basa su JavaScript.
È noto come zucchero sintattico per CSS, il che significa che rende più facile per l'utente leggere o esprimere le cose in modo più chiaro.
Usa la propria sintassi e compila in CSS leggibili.
Puoi facilmente scrivere CSS con meno codice in meno tempo.
È un pre-processore open source che viene interpretato in CSS.
Permette di scrivere CSS pulito in un costrutto di programmazione.
Aiuta a scrivere CSS più velocemente.
È un superset di CSS che aiuta i designer e gli sviluppatori a lavorare in modo più efficiente e veloce.
Poiché Sass è compatibile con tutte le versioni di CSS, possiamo utilizzare qualsiasi libreria CSS disponibile.
È possibile utilizzare la sintassi annidata e funzioni utili come la manipolazione del colore, la matematica e altri valori.
Lo sviluppatore impiega tempo per apprendere le nuove funzionalità presenti in questo pre-processore.
Se più persone lavorano sullo stesso sito, utilizzerà lo stesso preprocessore. Alcune persone usano il Sass e alcune persone usano il CSS per modificare direttamente i file. Quindi diventerà difficile lavorare con il sito.
Ci sono possibilità di perdere i vantaggi dell'ispettore di elementi integrato del browser.
SASS supporta due sintassi e cioè SCSS e Indented sintassi.
Il SCSS (Sassy CSS)è un'estensione della sintassi CSS che rende molto più facile mantenere fogli di stile di grandi dimensioni e può riconoscere la sintassi specifica del fornitore e molti CSS. I file SCSS utilizzano l'estensione.scss.
Il Indented è una sintassi precedente e talvolta chiamata solo come Sass. Usando questa forma di sintassi, i CSS possono essere scritti in modo conciso. I file SASS utilizzano l'estensione.sass.
Puoi usare SASS in tre modi diversi:
Come strumento da riga di comando
Come modulo Ruby
Come plugin per Rack enable framework
La nidificazione è la combinazione di diverse strutture logiche. Utilizzando SASS, possiamo combinare più regole CSS l'una nell'altra. Se si utilizzano più selettori, è possibile utilizzare un selettore all'interno di un altro per creare selettori composti.
È possibile selezionare il selettore principale utilizzando il &personaggio. Indica dove deve essere inserito il selettore genitore.
SASS supporta il selettore di segnaposto utilizzando il selettore di classe o id . Nel normale CSS, questi sono specificati con "#" o ".", ma in SASS sono sostituiti con"%".
Esistono 5 tipi di operazioni:
Operazioni sui numeri
Operazioni sul colore
Operazioni su stringhe
Operazioni booleane
Operazioni su elenco
Consente operazioni matematiche come addizione, sottrazione, moltiplicazione e divisione.
Consente di utilizzare componenti di colore insieme a operazioni aritmetiche.
Gli elenchi rappresentano serie di valori separati da virgole o spazi.
È possibile eseguire operazioni booleane sullo script Sass utilizzando gli operatori and, or and not.
Le parentesi sono una coppia di segni che di solito sono contrassegnati da parentesi tonde () o quadre [] che forniscono una logica simbolica che influisce sull'ordine delle operazioni.
Fornisce variabili SassScript nei selettori e nomi di proprietà utilizzando #{ }sintassi. È possibile specificare variabili o nomi di proprietà all'interno delle parentesi graffe.
È possibile impostare i valori predefiniti per le variabili aggiungendo il flag ! Default alla fine del valore della variabile. Non riassegnerà il valore, se è già assegnato alla variabile.
Richiede direttamente il nome del file da importare e tutti i file importati verranno combinati in un unico file CSS.
Imposta la regola di stile su diversi tipi di media.
Viene utilizzato per condividere regole e relazioni tra i selettori. Può estendere tutti gli altri stili di classe in una classe e può anche applicare i propri stili specifici.
È una raccolta di regole annidate che è in grado di creare blocchi di stile alla radice del documento.
Viene utilizzato per eseguire selettivamente le istruzioni del codice in base al risultato della valutazione di un'espressione.
Le istruzioni @else if vengono utilizzate con la direttiva @if, ogni volta che l'istruzione @if fallisce, vengono provate le istruzioni @else if e se falliscono anche loro, viene eseguita @else.
Ti permette di generare stili in un ciclo. La variabile counter viene utilizzata per impostare l'output per ogni iterazione.
Nella direttiva @each, viene definita una variabile che contiene il valore di ogni elemento in un elenco.
Viene utilizzato per definire i mixin che includono opzionalmente le variabili e l'argomento dopo il nome del mixin.
Viene utilizzato per includere il mixin nel documento e gli stili definiti dal mixin possono essere inclusi nella regola corrente.
I valori SassScript possono essere presi come argomenti nei mixin che vengono forniti quando mixin è include e sono disponibili come variabili all'interno del mixin.
Esistono due tipi di argomenti mixin:
Argomenti delle parole chiave
Argomenti variabili
È usato per includere argomenti nei mixin. Gli argomenti nominati possono essere passati in qualsiasi ordine e i valori predefiniti di argomento possono essere omessi.
Gli argomenti variabili vengono utilizzati per passare un numero qualsiasi di argomenti a mixin. Contiene argomenti di parole chiave passati alla funzione o mixin.
Utilizzando la direttiva di funzione, è possibile creare la propria funzione e utilizzarli nel contesto dello script oppure possono essere utilizzati con qualsiasi valore.
Il file CSS che genera il SASS è costituito da uno stile CSS predefinito che riflette la struttura del documento. Lo stile CSS predefinito è buono ma potrebbe non essere adatto a tutte le situazioni.
Lo stile annidato è lo stile predefinito di SASS. Questo modo di applicare lo stile è molto utile quando hai a che fare con file CSS di grandi dimensioni.
Nello stile di output espanso, ogni proprietà e regola ha la propria riga. Richiede più spazio rispetto allo stile CSS nidificato.
Lo stile CSS compatto occupa meno spazio in modo competitivo rispetto a Expanded e Nested. Si concentra principalmente sui selettori piuttosto che sulle sue proprietà.
Lo stile CSS compresso occupa meno spazio rispetto a tutti gli altri stili. Fornisce spazi bianchi solo per separare i selettori e la nuova riga alla fine del file.
Utilizza il rientro anziché{ e } per delimitare i blocchi.
Per separare le istruzioni, utilizza le nuove righe anziché il punto e virgola (;) .
La dichiarazione di proprietà e i selettori devono essere posizionati sulla propria riga e le istruzioni all'interno{ e }deve essere posizionato su una nuova riga e rientrato .
Utilizza il rientro anziché{ e } per delimitare i blocchi.
Per separare le istruzioni, utilizza le nuove righe anziché il punto e virgola (;) .
La dichiarazione di proprietà e i selettori devono essere posizionati sulla propria riga e le istruzioni all'interno{ e }deve essere posizionato su una nuova riga e rientrato .
Le proprietà CSS possono essere dichiarate in due modi:
Le proprietà possono essere dichiarate simili ai CSS ma senza semicolon(;).
colon(:) sarà anteposto a ogni nome di proprietà.
Puoi usare = per la direttiva @mixin e + per la direttiva @include che richiede meno battitura e rende il codice più semplice e più facile da leggere.
sass --watch C: \ ruby \ lib \ sass \ style.scss: style.css
I commenti occupano l'intera riga e racchiudono tutto il testo annidato sotto di essi e sono basati sulla riga con sintassi rientrata.
sass input.scss output.css
Prima controlla il byte Unicode, quindi la dichiarazione @charset e quindi la codifica della stringa Ruby.
Successivamente, se non è impostato nulla, considera la codifica del set di caratteri come UTF-8 .
Determina la codifica dei caratteri in modo esplicito utilizzando la dichiarazione @charset . Usa semplicemente "@charset encoding name" all'inizio del foglio di stile e SASS presumerà che questa sia la codifica dei caratteri data.
Se il file di output di SASS contiene caratteri non ASCII, utilizzerà la dichiarazione @charset .
Sass supporta due tipi di commenti:
Multiline comments- Questi sono scritti usando / * e * /. I commenti su più righe vengono conservati nell'output CSS.
Single line comments - Questi sono scritti usando //seguito da commenti. i commenti su una sola riga non vengono conservati nell'output CSS.
Valuta l'espressione SassScript utilizzando la riga di comando. Puoi eseguire la shell con la riga di comando sass insieme all'opzione -i .
Rileva gli errori e visualizza i valori dell'espressione SassScript nel flusso di output degli errori standard.
Visualizza il valore dell'espressione SassScript come errore irreversibile.