Sass - Guida rapida

Cos'è SASS?

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 di un documento in modo pulito e strutturale.

Inizialmente è stato progettato da Hampton Catlin e sviluppato da Natalie Weizenbaum nel 2006. Successivamente, Weizenbaum e Chris Eppstein ha usato la sua versione iniziale per estendere il Sass con SassScript.

Perché usare SASS?

• È un linguaggio di pre-elaborazione che fornisce una sintassi indentata (la propria sintassi) per i CSS.

• Fornisce alcune funzionalità, che vengono utilizzate per creare fogli di stile che consentono di scrivere codice in modo più efficiente ed è facile da mantenere.

• È un super set di CSS, il che significa che contiene tutte le funzionalità di CSS ed è un pre-processore open source, codificato in Ruby.

• Fornisce lo stile del documento in un buon formato strutturato rispetto al semplice CSS. Utilizza metodi riutilizzabili, istruzioni logiche e alcune delle funzioni incorporate come la manipolazione del colore, la matematica e gli elenchi di parametri.

Caratteristiche di SASS

• È 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.

Vantaggi di SASS

• Permette di scrivere CSS pulito in un costrutto di programmazione.

• Aiuta a scrivere rapidamente CSS.

• È un superset di CSS, che aiuta designer e 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.

Svantaggi di SASS

• Uno sviluppatore impiega tempo per apprendere le nuove funzionalità presenti in questo pre-processore.

• Se molte persone stanno lavorando sullo stesso sito, allora dovrebbe usare lo stesso preprocessore. Alcune persone usano Sass e alcune persone usano CSS per modificare direttamente i file. Pertanto, diventa difficile lavorare sul sito.

• Ci sono possibilità di perdere i vantaggi dell'ispettore di elementi integrato del browser.

In questo capitolo impareremo la procedura passo passo per installare Ruby, che viene utilizzato per eseguire i file SASS.

Requisiti di sistema per SASS

• Operating System - Cross-platform

• Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

• Programming Language - Ruby

Installazione di Ruby

Step 1 - Apri il link https://www.ruby-lang.org/en/downloads/, vedrai una schermata come mostrato di seguito -

Scarica la versione stabile corrente del file zip.

Step 2 - Quindi, esegui il setup per l'installazione Ruby sul sistema.

Step 3- Successivamente, aggiungi la cartella Ruby bin alla variabile utente PATH e alla variabile di sistema per lavorare con il comando gem.

Path User Variable -

• Fare clic con il pulsante destro del mouse su My Computer icona.

• Selezionare Properties.

• Quindi fare clic su Advanced scheda e fare clic Environment Variables.

Nella finestra Variabili d'ambiente , fare doppio clic sul PERCORSO come mostrato nella schermata riportata di seguito -

Otterrai una casella Modifica variabile utente come mostrato. Aggiungi il percorso della cartella Ruby bin nel campo Valore variabile comeC:\Ruby\bin. Se il percorso è già impostato per altri file, inserisci il punto e virgola dopo e aggiungi il percorso della cartella Ruby come mostrato di seguito.

Clicca il OK pulsante.

System Variable -

• Clicca il New pulsante.

Successivamente, il New System Variable blocco viene visualizzato come mostrato di seguito.

• accedere RubyOptnel campo Nome variabile erubygemsnel campo Valore variabile . Dopo aver scritto il nome e il valore della variabile , fare clic suOK pulsante.

Step 4 - Apri il prompt dei comandi nel tuo sistema e inserisci la seguente riga -

gem install sass

Step 5 - Successivamente, vedrai la seguente schermata dopo aver installato con successo SASS.

Esempio

Quello che segue è un semplice esempio di SASS.

<html>
   <head>
      <title> Import example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Simple Example</h1>
      <h3>Welcome to TutorialsPoint</h3>
   </body>
</html>

Ora creeremo il file come style.scss , che è abbastanza simile a CSS e l'unica differenza è che verrà salvato con l'estensione .scss. Entrambi i file .htm e .scss dovrebbero essere creati all'interno della cartellaruby. Puoi salvare il tuo file .scss nella cartellaruby\lib\sass\ (prima di questo processo, crea una cartella come sass nella directory lib).

h1{
   color: #AF80ED;
}

h3{
   color: #DE5E85;
}

Puoi dire a SASS di guardare il file e aggiornare il CSS ogni volta che il file SASS cambia, utilizzando il seguente comando:

sass --watch C:\ruby\lib\sass\style.scss:style.css

Quando esegui il comando precedente, creerà automaticamente il file style.css . Ogni volta che si modifica il file SCSS, il file style.css verrà aggiornato automaticamente.

Il file style.css avrà il seguente codice quando esegui il comando sopra indicato:

style.css

h1 {
   color: #AF80ED;
}
h3 {
   color: #DE5E85;
}

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

• Salva il codice sopra indicato in formato hello.html file.

• Apri questo file HTML in un browser.

In questo capitolo studieremo il SASS Syntax. SASS supporta due sintassi e cioèSCSS e Indented syntax.

• Il SCSS (Sassy CSS)è un'estensione della sintassi CSS. Ciò significa che ogni CSS valido è anche un SCSS valido. SCSS semplifica notevolmente la gestione di fogli di stile di grandi dimensioni e può riconoscere la sintassi specifica del fornitore, molti file CSS e SCSS utilizzano l'estensione.scss.

• Indented - Questa è 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.

Sintassi rientrata SASS

SASS La sintassi rientrata o semplicemente SASS è un'alternativa alla sintassi SCSS basata su CSS.

• 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 .

Ad esempio, considera il seguente codice SCSS:

.myclass {
   color = red;
   font-size = 0.2em;
}

Il indentedla sintassi è una sintassi precedente, che non è consigliata per l'uso nei nuovi file Sass. Se utilizzi questo file, verrà visualizzato un errore nel file CSS come abbiamo utilizzato= invece di impostare proprietà e variabili.

Compilare il codice sopra indicato utilizzando il seguente comando:

sass --watch C:\ruby\lib\sass\style.scss:style.css

Quindi, esegui il comando precedente; mostrerà un errore nel file style.css come mostrato di seguito -

Error: Invalid CSS after "  color = red": expected "{", was ";"
      on line 2 of C:\ruby\lib\sass\style17.scss

1:.myclass {
2:   color = red;
3:   font-size = 0.2em;
4:}

Differenze di sintassi di SASS

La maggior parte delle sintassi CSS e SCSS funzionano perfettamente in SASS. Tuttavia, ci sono alcune differenze, che sono spiegate nelle sezioni seguenti:

Sintassi delle proprietà

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à.

Ad esempio, puoi scrivere come:

.myclass
   :color red
   :font-size 0.2em

Per impostazione predefinita, possono essere utilizzati entrambi i metodi precedenti (dichiarazione delle proprietà senza punto e virgola e due punti con prefisso al nome della proprietà). Tuttavia, solo una sintassi della proprietà può essere specificata quando si utilizza l' opzione : property_syntax .

Selettori multilinea

Nella sintassi Rientrata, i selettori possono essere posizionati su una nuova riga ogni volta che compaiono dopo commas.

Esempio

L'esempio seguente descrive l'uso di selettori multilinea nel file SCSS:

<html>
   <head>
      <title>Multiline Selectors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>
   
   <body>
      <h2>Example using Multiline Selectors</h2 >
      <p class = "class1">Welcome to Tutorialspoint!!!</p>
      <p class = "class2">SASS stands for Syntactically Awesome Stylesheet...</p>
   </body>
</html>

Quindi, crea il file style.scss . Nota l' estensione .scss .

style.scss

.class1,
.class2{
   color:red;
}

Puoi dire a SASS di guardare il file e aggiornare il CSS ogni volta che il file SASS cambia, utilizzando il seguente comando:

sass --watch C:\ruby\lib\sass\style.scss:style.css

Quindi, esegui il comando sopra indicato, creerà automaticamente il file style.css con il seguente codice:

Lo style.css generato è come mostrato di seguito -

style.css

.class1,
.class2 {
   color: red;
}

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

• Salva il codice html sopra indicato nel file multiline_selectors .html.

• Apri questo file HTML in un browser, viene visualizzato un output come mostrato di seguito.

Commenti

I commenti occupano un'intera riga e racchiudono tutto il testo annidato sotto di essi. Sono basati su righe con sintassi rientrata. Per ulteriori informazioni sui commenti, fare riferimento a questo collegamento .

@importare

In SASS il @importla direttiva può essere scritta con / senza virgolette. A differenza di SCSS, devono essere utilizzati tra virgolette.

Ad esempio, in SCSS il @import direttiva può essere usata come -

@import "themes/blackforest";
@import "style.sass";

Questo può essere scritto in SASS come -

@import themes/blackforest
@import fontstyle.sass

Direttive Mixin

SASS supporta la scorciatoia per direttive come @mixin e @include. Invece di@mixin e @include Puoi usare = e + caratteri, che richiedono meno battitura e rendono il codice più semplice e più facile da leggere.

Ad esempio, puoi scrivere le direttive mixin come -

=myclass
   font-size: 12px;
p
   +myclass

Il codice sopra indicato è lo stesso di -

@mixin myclass
   font-size: 12px;
p
   @include myclass

Sintassi deprecata

SASS supporta l'uso di una vecchia sintassi. Tuttavia, l'utilizzo di questa sintassi in SASS ènot recommended. Se si utilizza questa sintassi verrà visualizzato un avviso che verrà rimosso nelle versioni successive. Alcune delle vecchie sintassi sono mostrate nella tabella seguente.

S. No.	Operatore e descrizione
1	= È stato utilizzato al posto di: quando si impostano variabili e proprietà sui valori di SassScript.
2	||= È stato utilizzato al posto di: ogni volta che si assegna il valore predefinito di una variabile.
3	! Invece di $,! è stato utilizzato come prefisso di variabile. La funzionalità non verrà modificata quando viene utilizzata al posto di $.

SASS è più potente e stabile che fornisce potenza al linguaggio di base utilizzando l'estensione dei CSS. Puoi usare SASS in tre modi diversi:

• Come strumento da riga di comando
• Come modulo Ruby
• Come plugin per Rack enable framework

Se stai usando SASS su Windows, devi installare Rubyprimo. Per ulteriori informazioni sull'installazione di Ruby, fare riferimento al capitolo Installazione di SASS .

La tabella seguente mostra i comandi utilizzati per eseguire il codice SASS:

S. No.	Comando e descrizione
1	sass input.scss output.css Viene utilizzato per eseguire il codice SASS dalla riga di comando.
2	sass --watch input.scss:output.css Informa SASS di guardare il file e aggiornare il CSS ogni volta che il file SASS cambia.
3	sass --watch app/sass:public/stylesheets Viene utilizzato per controllare l'intera directory, se SASS contiene molti file in una directory.

Plugin Rack / Rails / Merb

Rackè un'interfaccia per server web, che viene usata per sviluppare applicazioni web in Ruby. Per informazioni su Rack, visitare questo collegamento .

È possibile abilitare il SASS in Rails 3 versione utilizzando il environment.rb file presente sotto il configcartella. Abilita il SASS per Rails 3 utilizzando il codice seguente:

config.gem "sass"

Puoi usare la seguente riga per Gemfile per Rails 3 (e versioni successive), come -

gem "sass"

Railsè un framework web open source che utilizza standard web come JSON, HTML, CSS e JavaScript per la visualizzazione dell'interfaccia utente. Per lavorare con Rails, devi avere una conoscenza di base di Ruby e della programmazione orientata agli oggetti. Ulteriori informazioni sul framework on Rails qui .

Se vuoi abilitare il SASS in Rack applicazione, aggiungere le seguenti righe al file config.ru file, che è presente nella directory principale dell'app -

require 'sass/plugin/rack'
use Sass::Plugin::Rack

Merbè un framework per applicazioni web, che fornisce velocità e modularità a Rails. Per saperne di più su Merb, apri questo link .

È possibile abilitare il SASS in Merb aggiungendo la riga seguente al file config/dependencies.rb file -

dependency "merb-haml"

Caching

SASS memorizza nella cache documenti come modelli e parziali, che possono essere riutilizzati senza analizzarli a meno che non siano stati modificati. Rende la compilazione dei file SASS più veloce e funziona ancora meglio quando i modelli sono divisi in file separati, che vengono tutti importati in un unico file di grandi dimensioni. Se elimini i file memorizzati nella cache, verranno generati di nuovo alla successiva compilazione.

Opzioni

È possibile impostare le opzioni nel file environment.rb di Rails o nel file config.ru dell'applicazione Rack utilizzando la riga seguente:

Sass::Plugin.options[:style] = :compact

È inoltre possibile impostare le opzioni nel init.rb file Merb utilizzando la seguente riga -

Merb::Plugin.config[:sass][:style] = :compact

Sono disponibili alcune opzioni con SASS e SCSS come descritto nella tabella riportata di seguito:

S. No.	Opzione e descrizione
1	:style Visualizza lo stile dell'output.
2	:syntax È possibile utilizzare la sintassi rientrata per sass e la sintassi dell'estensione CSS per scss .
3	:property_syntax Usa la sintassi rientrata per utilizzare le proprietà. Se non è corretto, verrà generato un errore. Ad esempio, si consideri "background: # F5F5F5" in cui background è il nome di una proprietà e # F5F5F5 è il valore della proprietà. È necessario utilizzare i due punti dopo il nome della proprietà.
4	:cache Accelera la compilazione dei file SASS. È impostato su true per impostazione predefinita.
5	:read_cache Legge solo i file SASS se la cache non è impostata e read_cache è impostato.
6	:cache_store Può essere utilizzato per archiviare e accedere al risultato memorizzato nella cache impostandolo su un'istanza di Sass :: CacheStores :: Base .
7	:never_update Non dovrebbe mai aggiornare il file CSS se i file del modello cambiano. Per impostazione predefinita è impostato su false.
8	:always_update Dovrebbe aggiornare il file CSS ogni volta che i file del modello cambiano.
9	:always_check Dovrebbe controllare gli aggiornamenti ogni volta che il server viene avviato. Ricompilerà e sovrascriverà il file CSS, se c'è un aggiornamento nel file modello SASS.
10	:poll Utilizza il backend di polling per Sass :: Plugin :: Compiler # watch (che controlla il modello e l'aggiornamento dei file CSS) impostandolo su true.
11	:full_exception Visualizza la descrizione dell'errore ogni volta che si verifica un'eccezione nel codice SASS all'interno del file CSS generato. Visualizza un numero di riga in cui si è verificato un errore insieme alla sorgente nel file CSS.
12	:template_location Fornisce il percorso per la directory dei modelli nell'applicazione.
13	:css_location Fornisce il percorso per i fogli di stile CSS nell'applicazione.
14	:unix_newlines Fornisce newline in stile Unix durante la scrittura di file impostandolo su true.
15	:filename È il nome del nome del file visualizzato e utilizzato per la segnalazione degli errori.
16	:line Specifica la prima riga del modello SASS e visualizza i numeri di riga per gli errori.
17	:load_paths Viene utilizzato per caricare i percorsi per il modello SASS che sono inclusi utilizzando la direttiva @import .
18	:filesystem_importer Viene utilizzato per importare file dal file system che utilizza la sottoclasse Sass :: Importers :: Base per gestire i percorsi di caricamento delle stringhe.
19	:sourcemap Genera mappe sorgente che istruiscono il browser a trovare gli stili SASS. Utilizza tre valori: :auto- Contiene URI relativi. Se non è presente alcun URI relativo, utilizza "file:" URI. :file - Utilizza "file:" URI, che funzionano localmente, non su server remoto. :inline - Contiene il testo di origine nella mappa di origine che viene utilizzato per creare file di mappa di origine di grandi dimensioni.
20	:line_numbers Visualizza il numero di riga per gli errori riportati nel file CSS impostandolo su true.
21	:trace_selectors Aiuta a tracciare i selettori di importazioni e mixin quando è impostato su true.
22	:debug_info Fornisce informazioni di debug del file SASS utilizzando il numero di riga e il file quando è impostato su true.
23	:custom Rende i dati disponibili per le funzioni SASS nelle applicazioni separate.
24	:quiet Disabilita gli avvisi impostandoli su true.

Selezione della sintassi

È possibile determinare quale sintassi si sta utilizzando nel modello SASS utilizzando lo strumento della riga di comando SASS. Per impostazione predefinita, SASS utilizza la sintassi rientrata che è un'alternativa alla sintassi SCSS basata su CSS. È possibile utilizzare il programma della riga di comando SCSS, che è simile al programma SASS, ma per impostazione predefinita considera la sintassi SCSS.

Codifiche

SASS utilizza la codifica dei caratteri dei fogli di stile specificando le seguenti specifiche CSS:

• Per prima cosa, controlla il byte Unicode, la successiva 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 . Basta usare "@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 .

In questo capitolo, studieremo CSS Extensions. Le estensioni CSS possono essere utilizzate per migliorare la funzionalità delle pagine web. La tabella seguente elenca alcune delle estensioni CSS utilizzate in SASS -

S. No.	Estensione e descrizione CSS
1	Regole annidate È un modo per combinare più regole CSS l'una nell'altra.
2	Riferimento ai selettori dei genitori: & È il processo di selezione del selettore genitore utilizzando il & personaggio.
3	Proprietà annidate Consente l'annidamento di proprietà in altre proprietà che porta al raggruppamento di un altro codice correlato.
4	Selettori segnaposto Sass supporta il selettore di segnaposto usando il selettore di classe o id facendo uso della direttiva @extend .

In questo capitolo approfondiremo il Sass Comments. I commenti sono istruzioni non eseguibili, che vengono inserite nel codice sorgente. I commenti rendono il codice sorgente più facile da capire. 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.

Esempio

Il seguente esempio dimostra l'uso dei commenti nel file SCSS:

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <a href = "http://www.tutorialspoint.com/">TutorialsPoint</a>
   </body>
</html>

Quindi, crea il file style.scss .

style.scss

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are in single line
// They will not appear in the CSS output,
// since they use the single-line comment syntax.
a { color: blue; }

Puoi dire a SASS di guardare il file e aggiornare il CSS ogni volta che il file SASS cambia, utilizzando il seguente comando:

sass --watch C:\ruby\lib\sass\style.scss:style.css

Quindi, esegui il comando precedente, creerà automaticamente il file style.css con il seguente codice:

style.css

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
   color: black; }

a {
   color: blue; }

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

• Salva il codice html sopra indicato in sass_comments.html file.

• Apri questo file HTML in un browser, viene visualizzato un output come mostrato di seguito.

Per studiare l'interpolazione all'interno di commenti su più righe, fare clic su questo collegamento .

Sass - Interpolazione nei commenti multilinea

Descrizione

L'interpolazione all'interno dei commenti su più righe viene risolta nel CSS risultante. È possibile specificare variabili o nomi di proprietà all'interno delle parentesi graffe.

Sintassi

$var : "value";
/* multiline comments #{$var} */

Esempio

L'esempio seguente mostra l'uso dell'interpolazione nei commenti su più righe nel file SCSS:

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <p>This is an example for Interpolation in SASS.</p>
   </body>
</html>

Quindi, crea il file style.scss .

style.css

$version: "7.8";
/* Framework version for the generated CSS is #{$version}. */

Puoi dire a SASS di guardare il file e aggiornare il CSS ogni volta che il file SASS cambia, utilizzando il seguente comando:

sass --watch C:\ruby\lib\sass\style.scss:style.css

Successivamente, esegui il comando precedente; creerà automaticamente il file style.css con il codice seguente

style.css

/* Framework version for the generated CSS is 7.8. */

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

• Salva il codice html sopra indicato in sass_comments_interpolation.htm file.

• Apri questo file HTML in un browser, viene visualizzato un output come mostrato di seguito.

SASS utilizza una piccola serie di estensioni note come SassScript che possono essere incluse nei documenti SASS per calcolare le variabili dai valori delle proprietà e utilizza le proprietà delle variabili, l'aritmetica e altre funzioni. SassScript può essere utilizzato anche con selettori e nomi di proprietà durante l'utilizzo di mixin (Mixins consente di riutilizzare gli stili CSS in tutto il foglio di stile).

La tabella seguente elenca alcune delle estensioni CSS utilizzate in SASS -

S. No.	Estensione e descrizione CSS
1	Shell interattiva Valuta l'espressione SassScript utilizzando la riga di comando.
2	Variabili Rappresenta i dati come valori numerici, caratteri o indirizzi di memoria.
3	Tipi di dati Dichiara il tipo di dati per ogni oggetto dati.
4	Operazioni Fornisce operazioni come numeri, colori, stringhe, booleane e operazioni di elenco.
5	Parentesi È una coppia di segni che di solito sono contrassegnati da parentesi tonde () o parentesi quadre [].
6	Funzioni Supporta l'uso delle funzioni fornendo alcuni argomenti di parole chiave.
7	Interpolazione Fornisce variabili SassScript e nomi di proprietà utilizzando #{ } sintassi.
8	& in SassScript Consente l'annidamento di proprietà in altre proprietà che portano al gruppo di un altro codice correlato.
9	Impostazioni predefinite variabili Consente l'annidamento di proprietà in altre proprietà che portano al gruppo di un altro codice correlato.

La tabella seguente elenca tutte le regole e le direttive che puoi usare in SASS.

S. No.	Direttive e descrizione
1	@importare Importa i file SASS o SCSS, prende direttamente il nome del file da importare.
2	@media Imposta la regola di stile su diversi tipi di media.
3	@estendere La direttiva @extend viene utilizzata per condividere regole e relazioni tra i selettori.
4	@ alla radice La direttiva @ at-root è una raccolta di regole annidate, che è in grado di creare blocchi di stile alla radice del documento.
5	@debug La direttiva @debug rileva gli errori e visualizza i valori dell'espressione SassScript nel flusso di output degli errori standard.
6	@avvisare La direttiva @warn viene utilizzata per fornire consigli cautelativi sul problema; mostra i valori dell'espressione SassScript nel flusso di output degli errori standard.
7	@errore La direttiva @error visualizza il valore dell'espressione SassScript come errore irreversibile.

In questo capitolo, studieremo Control Directives & Expressions. Lo stile basato su alcune condizioni o l'applicazione dello stesso stile molte volte con variazioni può essere ottenuto utilizzando le direttive e le espressioni di controllo, che sono supportate da SassScript. Queste direttive di controllo sono opzioni avanzate utilizzate principalmente nei mixin. Richiedono una notevole flessibilità, in quanto fanno parte delle librerie Compass.

La tabella seguente elenca le direttive di controllo e le espressioni utilizzate in SASS -

S. No.	Direttiva di controllo ed espressione con descrizione
1	Se() In base alla condizione, la funzione if () restituisce solo un risultato da due possibili risultati.
2	@Se La direttiva @if accetta espressioni SassScript e utilizza gli stili nidificati ogni volta che il risultato dell'espressione è diverso da false o null .
3	@per La direttiva @for ti consente di generare stili in un ciclo.
4	@ogni Nella direttiva @each , viene definita una variabile che contiene il valore di ogni elemento in un elenco.
5	@mentre Richiede espressioni SassScript e fino a quando l'istruzione non restituisce false, produce iterativamente stili nidificati.

I mixin consentono di creare un gruppo di stili, che sono riutilizzabili in tutto il foglio di stile senza alcuna necessità di ricreare classi non semantiche. In CSS, i mixin possono memorizzare più valori o parametri e chiamare la funzione; aiuta a evitare di scrivere codici ripetitivi. I nomi dei mixin possono utilizzare caratteri di sottolineatura e trattini in modo intercambiabile. Di seguito le direttive presenti in Mixins -

S. No.	Direttiva e descrizione
1	Definizione di un mixin La direttiva @mixin viene utilizzata per definire il mixin.
2	Compreso un Mixin La direttiva @include viene utilizzata per includere i mixin nel documento.
3	argomenti I valori di SassScript possono essere presi come argomenti in mixin, che viene fornito quando mixin è incluso e disponibile come variabile all'interno del mixin.
4	Passaggio di blocchi di contenuto a un mixin Il blocco di stili viene passato al mixin.

In questo capitolo, studieremo Function Directives. In SASS, puoi creare la tua funzione e usarla nel tuo contesto di script o può essere utilizzata con qualsiasi valore. Le funzioni vengono chiamate utilizzando il nome della funzione e con qualsiasi parametro.

Esempio

L'esempio seguente mostra l'uso della direttiva function nel file SCSS:

function_directive.htm

<html>
   <head>
      <title>Nested Rules</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>

   <body>
      <div class = "container" id = "set_width">
         <h2>Example for Function directives</h2>
         <p>SASS stands for Syntactically Awesome Stylesheet. </p>
      </div>
   </body>
</html>

Quindi, crea il file style.scss .

style.scss

$first-width: 5px;
$second-width: 5px;

@function adjust_width($n) {
   @return $n * $first-width + ($n - 1) * $second-width;
}

#set_width { padding-left: adjust_width(10); }

Puoi dire a SASS di guardare il file e aggiornare il CSS ogni volta che il file SASS cambia, utilizzando il seguente comando:

sass --watch C:\ruby\lib\sass\style.scss:style.css

Successivamente, esegui il comando precedente; creerà automaticamente il file style.css con il seguente codice -

style.css

#set_width {
   padding-left: 95px; 
}

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

• Salva il codice html sopra indicato in function_directive.html file.

• Apri questo file HTML in un browser, viene visualizzato un output come mostrato di seguito.

Nell'output, puoi vedere che viene applicato il riempimento sinistro.

Proprio come mixin, la funzione può anche accedere a variabili definite a livello globale e può anche accettare parametri. È necessario chiamare il valore restituito per la funzione utilizzando@return. Possiamo chiamare le funzioni definite da SASS utilizzando parametri di parole chiave.

Chiama la funzione sopra come mostrato di seguito.

#set_width { padding-left: adjust_width($n: 10); }

Convenzioni di denominazione

Per evitare conflitti di denominazione, è possibile aggiungere un prefisso ai nomi delle funzioni in modo che possano essere facilmente differenziati. Come i mixin, anche gli argomenti variabili sono supportati dalle funzioni definite dall'utente. Le funzioni e altri identificatori SASS possono utilizzare caratteri di sottolineatura (_) e trattini (-) in modo intercambiabile.

Ad esempio, se una funzione è definita come adjust_width, può essere utilizzato come adjust-width, e viceversa.

In questo capitolo, studieremo SASS Output Style. Il file CSS generato dal 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; d'altra parte, SASS supporta molti altri stili.

Supporta i seguenti diversi stili di output:

:nidificato

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. Rende la struttura del file più leggibile e facilmente comprensibile. Ogni proprietà prende la propria linea e il rientro di ogni regola si basa su quanto profondamente è annidato.

Ad esempio, possiamo annidare il codice nel file SASS come mostrato di seguito -

#first {
   background-color: #00FFFF;
   color: #C0C0C0; 
}

#first p {
   width: 10em; 
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00; 
}

:allargato

Nello stile CSS espanso, ogni proprietà e regola ha la propria riga. Richiede più spazio rispetto allo stile CSS annidato. La sezione Regole è costituita da proprietà, tutte intese all'interno delle regole, mentre le regole non seguono alcun rientro.

Ad esempio, possiamo espandere il codice nel file SASS come mostrato di seguito -

#first {
   background-color: #00FFFF;
   color: #C0C0C0;
}

#first p {
   width: 10em;
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00;
}

:compatto

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à. Ciascun selettore occupa una riga e anche le sue proprietà sono collocate nella stessa riga. Le regole nidificate sono posizionate una accanto all'altra senza una nuova riga e i gruppi separati di regole avranno nuove linee tra di loro.

Ad esempio, possiamo compattare il codice nel file SASS come mostrato di seguito -

#first { 
   background-color: #00FFFF; color: #C0C0C0; 
}

#first p { 
   width: 10em; 
}

.highlight { 
   text-decoration: underline; font-size: 5em; background-color: #FFFF00; 
}

: compresso

Lo stile CSS compresso occupa la minor quantità di spazio rispetto a tutti gli altri stili discussi sopra. Fornisce spazi bianchi solo per separare i selettori e la nuova riga alla fine del file. Questo modo di disegnare crea confusione e non è facilmente leggibile.

Ad esempio, possiamo comprimere il codice nel file SASS come mostrato di seguito -

#first { 
   background-color:#00FFFF;color:#C0C0C0
} 

#first p { 
   width:10em 
} 

.highlight { 
   text-decoration:underline;font-size:5em;background-color:#FFFF00 
}

È possibile estendere la funzionalità di SASS per fornire diversi tipi di funzionalità e personalizzazioni per gli utenti. Per utilizzare queste funzionalità, l'utente deve avere una conoscenza di Ruby.

Definizione delle funzioni SASS personalizzate

Puoi definire le tue funzioni SASS durante l'utilizzo dell'API Ruby. Puoi aggiungere le tue funzioni personalizzate aggiungendole ai metodi Ruby come mostrato nel codice seguente:

module Sass::Script::Functions
   def reverse(string)
      assert_type string, :String
      Sass::Script::Value::String.new(string.value.reverse)
   end
   declare :reverse, [:string]
end

Nel codice che potresti vedere, la funzione, declare, specifica i nomi degli argomenti per la funzione. Se fallisce, non accetterà alcun argomento anche se la funzione sta funzionando e accetta anche argomenti di parole chiave arbitrarie. È possibile ottenere valori Ruby utilizzando la funzione di accesso ai valori e accedere agli oggetti colore utilizzando rgb, rosso, verde o blu .

Archivi cache

SASS memorizza la cache dei documenti analizzati, che possono essere riutilizzati senza eseguire nuovamente l'analisi. SASS utilizza:cache_locationper scrivere i file di cache sul file system. Rende la compilazione dei file SASS più veloce e se elimini i file memorizzati nella cache, verranno generati di nuovo alla successiva compilazione. È possibile definire il proprio cache store impostando il file:cache_storeopzione. Questo scriverà i file di cache sul file system o condividerà i file di cache su processi o macchine Ruby. SASS utilizza l'istanza della sottoclasse di Sass :: CacheStores :: Base per archiviare e recuperare i risultati della cache.

Importatori personalizzati

SASS utilizza @import per importare file SCSS e SASS e passa i percorsi alla regola @import per trovare un codice di percorso appropriato per percorsi specificati. Gli importatori SASS utilizzano il file system per caricare il codice e aggiungerlo al carico utilizzando il database o un diverso schema di denominazione dei file.

L'importatore singolo può caricare un singolo file e può essere posizionato nell'array: load_paths insieme ai percorsi del file system. Durante l'utilizzo di @import , SASS cerca i percorsi caricati, che importano il percorso per l'importatore. Quando viene trovato il percorso, viene utilizzato il file importato. Un utente può ereditare gli importatori daSass::Importers::Base.