Prima di poter utilizzare Sass, devi configurarlo nel tuo progetto. Se vuoi solo leggere, sentiti libero di leggere, ma ti consigliamo di installare prima Sass. Installa Sass per comprendere tutte le funzionalità di Sass.

• Pre-elaborazione

  Scrivere CSS è divertente in sé e per sé, ma quando il foglio di stile diventa enorme diventa difficile da mantenere. E in questo caso, il preprocessore ci aiuterà. Sass ti consente di utilizzare funzionalità non disponibili nei CSS stessi, come variabili, annidamento, mixin, ereditarietà e altre cose carine che riportano la comodità di scrivere CSS.

  Una volta che inizi a utilizzare Sass, il preprocessore elabora il tuo file Sass e lo salva come un semplice file CSS che puoi utilizzare su qualsiasi sito.

  Il modo più semplice per ottenere questo tipo di risultato è utilizzare il terminale. Una volta installato Sass, puoi compilare il tuo Sass in CSS usando il comando sass. Devi solo dire a Sass dove prendere il file Sass e in quale file CSS compilarlo. Ad esempio, eseguendo sass input.scss output.css in un terminale, dici a Sass di prendere un file Sass, input.scss, e di compilarlo in output.css.

• Variabili

  Pensa alle variabili come a un modo per archiviare le informazioni che desideri utilizzare in tutti gli stili del tuo progetto. Puoi memorizzare colori, stack di caratteri o qualsiasi altro valore CSS che desideri utilizzare nelle variabili. Per creare una variabile in Sass è necessario utilizzare il simbolo $. Consideriamo un esempio:

  Sintassi SCSS

  $ font-stack: Helvetica, sans-serif; $ colore primario: # 333; body (font: 100% $ font-stack; color: $ primary-color;)

  sintassi sass

  $ font-stack: Helvetica, sans-serif $ primary-color: # 333 body font: 100% $ font-stack color: $ primary-color

  Quando Sass viene analizzato, prende i valori che abbiamo specificato in $ font-stack e $ primary-color e li inserisce in un normale file CSS in cui abbiamo specificato le variabili come valori. Pertanto, le variabili diventano una funzionalità potente, ad esempio, quando si lavora con i colori aziendali utilizzati in tutto il sito.

  corpo (font: 100% Helvetica, sans-serif; colore: # 333;)

• Nidificazione

  Mentre scrivi HTML, probabilmente avrai notato che ha una chiara gerarchia nidificata e visiva. Questo non è il caso dei CSS.

  Sass ti consentirà di annidare i selettori CSS allo stesso modo della gerarchia visiva dell'HTML. Ma ricorda che troppa nidificazione rende il tuo documento meno leggibile e meno leggibile, il che è considerato una cattiva pratica.

  Per capire cosa intendiamo, ecco un tipico esempio di stili di navigazione del sito web:

  Sintassi SCSS

  nav (ul (margin: 0; padding: 0; list-style: nessuno;) li (display: inline-block;) a (display: block; padding: 6px 12px; decorazione del testo: nessuno;))

  sintassi sass

  nav ul margin: 0 padding: 0 list-style: nessuno li display: inline-block a display: block padding: 6px 12px testo-decorazione: nessuno

  Hai notato che i selettori ul, li e a sono annidati all'interno del selettore nav? Questo è un ottimo modo per rendere più leggibile il tuo file CSS. Quando generi il file CSS, otterrai qualcosa di simile nell'output:

  nav ul (margine: 0; padding: 0; list-style: nessuno;) nav li (display: inline-block;) nav a (display: block; padding: 6px 12px; text-decoration: nessuno;)

• frammentazione

  Puoi creare blocchi di file Sass che contengono piccoli frammenti di CSS che possono essere utilizzati in altri file Sass. Questo è un ottimo modo per rendere il tuo CSS modulare e anche facile da mantenere. Uno snippet è un semplice file Sass il cui nome inizia con un carattere di sottolineatura, come _partial.scss. Il carattere di sottolineatura nel nome del file Sass dice al compilatore che questo è solo un frammento e non deve essere compilato in CSS. I frammenti di Sass sono inclusi utilizzando la direttiva @import.

• Importare

  I CSS hanno una capacità di importazione che ti permette di dividere il tuo file CSS in file più piccoli e renderli più facili da mantenere. Ma questo metodo ha uno svantaggio significativo: ogni volta che usi @import in CSS, viene creata un'altra richiesta HTTP nel CSS. Sass prende l'idea di importare file tramite la direttiva @import, ma invece di effettuare una richiesta HTTP separata, Sass importa il file specificato nella direttiva in quello in cui viene chiamato, ad es. l'output è un file CSS, compilato da diversi frammenti.

  Ad esempio, hai diversi pezzi di file Sass: _reset.scss e base.scss. E vogliamo importare _reset.scss in base.scss.

  Sintassi SCSS

  // _reset.scss html, body, ul, ol (margin: 0; padding: 0;) // base.scss @import "reset"; corpo (font: 100% Helvetica, sans-serif; colore di sfondo: #efefef;)

  sintassi sass

  // _reset.sass html, body, ul, ol margin: 0 padding: 0 // base.sass @import reset corpo font: 100% Helvetica, sans-serif background-color: #efefef

  Nota che stiamo usando @import "reset"; nel file base.scss. Quando si importa il file, non è necessario specificare l'estensione .scss. Sass è un linguaggio intelligente e lo capirà. Quando il CSS viene generato ottieni:

  html, body, ul, ol (margin: 0; padding: 0;) body (font: 100% Helvetica, sans-serif; background-color: #efefef;)

• Miscele (impurità)

  Alcune cose in CSS sono piuttosto noiose da scrivere, specialmente in CSS3, dove, oltre a ciò, è spesso necessario utilizzare un gran numero di prefissi del fornitore. I mixin ti consentono di creare gruppi di dichiarazioni CSS che dovrai utilizzare più volte sul tuo sito. È utile utilizzare i mixin per i prefissi dei fornitori. Esempio per bordo-raggio:

  Sintassi SCSS

  @mixin border-radius ($ raggio) (-webkit-border-radius: $ raggio; -moz-border-radius: $ raggio; -ms-border-radius: $ raggio; border-radius: $ raggio;) .box (@include bordo-raggio (10px);)

  sintassi sass

  = border-radius ($ raggio) -webkit-border-radius: $ raggio -moz-border-radius: $ raggio -ms-border-radius: $ raggio border-radius: $ raggio .box + border-radius (10px)

  Per creare un mixin, usa la direttiva @mixin + il nome di questo mixin. Abbiamo chiamato il nostro mixin border-radius. Inoltre, nel mixin, usiamo la variabile $ raggio all'interno delle parentesi, permettendoci così di passare quello che vogliamo nella variabile. Una volta creato un mixin, puoi usarlo come parametro CSS avviando la chiamata con @include e il nome del mixin. Quando il tuo CSS è compilato, ottieni questo:

  .box (-webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px;)

• Estensione / Ereditarietà

  Questa è una delle funzionalità più utili di Sass. Utilizzando la direttiva @extend, puoi ereditare set di proprietà CSS da un selettore a un altro. Ciò mantiene il tuo file Sass "pulito". Nel nostro esempio, ti mostreremo come modellare gli avvisi di errore, avviso e successo utilizzando altre funzionalità di Sass che vanno di pari passo con le classi di estensione e modello.

  Una classe modello è un tipo speciale di classe che viene visualizzato solo quando si utilizza un'estensione: questo manterrà il tuo CSS compilato pulito e ordinato.

  Sintassi SCSS

  % equal-heights (display: flex; flex-wrap: wrap;)% message-shared (border: 1px solid #ccc; padding: 10px; color: # 333;) .message (@extend% message-shared;). success (@extend% message-shared; border-color: verde;) .error (@extend% message-shared; border-color: rosso;) .warning (@extend% message-shared; border-color: giallo;)

  sintassi sass

  // Questo frammento di codice non verrà inserito nel CSS poiché% equal-heights non è mai stato espanso.% display a uguale altezza: flex flex-wrap: wrap // Questo frammento di codice finirà nei CSS perché% message-shared è esteso.% bordo messaggio condiviso: 1px solido #ccc padding: 10px colore: # 333 .message @extend% messaggio condiviso .success @extend% messaggio condiviso colore bordo: verde .error @extend% messaggio condiviso colore bordo: red .warning @extend% message-shared border-color: yellow

  Il codice sopra dice alle classi .message, .success, .error e .warning di comportarsi come% message-shared. Ciò significa che ovunque venga chiamato % message-shared, verranno chiamati anche .message, .success, .error e .warning. La magia avviene nel CSS generato in cui ciascuna di queste classi ottiene proprietà CSS proprio come% message-shared. Ciò ti consentirà di evitare di scrivere molte classi negli elementi HTML.

  Puoi estendere la maggior parte dei selettori CSS semplici oltre alle classi basate su modelli in Sass, tuttavia, la creazione di modelli è il modo più semplice per assicurarti di non estendere la classe ovunque venga utilizzata nei tuoi stili, il che potrebbe portare a uno stile indesiderato nel tuo CSS. . ..

  Quando generi il tuo CSS, appare come nell'esempio qui sotto. Nota che % equal-heights non viene inserito nel CSS, poiché non è mai stato utilizzato.

  .message, .success, .error, .warning (border: 1px solid #cccccc; padding: 10px; color: # 333;) .success (border-color: green;) .error (border-color: red;). avviso (colore del bordo: giallo;)

• Operatori matematici

  L'uso della matematica nei CSS è molto utile. Sass ha diversi operatori matematici standard come +, -, *, / e%. Nel nostro esempio, stiamo facendo dei semplici calcoli per calcolare la larghezza del lato e dell'articolo.

  Sintassi SCSS

  .container (larghezza: 100%;) articolo [ruolo = "principale"] (float: sinistra; larghezza: 600px / 960px * 100%;) a parte [ruolo = "complementare"] (float: destra; larghezza: 300px / 960px * cento% ; )

  sintassi sass

  .larghezza contenitore: 100% articolo [ruolo = "principale"] float: larghezza sinistra: 600px / 960px * 100% a parte [ruolo = "complementare"] float: larghezza destra: 300px / 960px * 100%

  Abbiamo creato una semplice griglia modulare reattiva larga 960 px. Usando gli operatori matematici, abbiamo preso i dati valutati in pixel e li abbiamo convertiti in percentuali con poco sforzo. Il CSS compilato ha questo aspetto:

  .container (larghezza: 100%;) articolo [ruolo = "principale"] (float: sinistra; larghezza: 62,5%;) a parte [ruolo = "complementare"] (float: destra; larghezza: 31,25%;)

27.07.2017

Questa serie di tutorial SASS è progettata sia per principianti che per sviluppatori avanzati. Questo è il primo di un tutorial in quattro parti in cui imparerai a conoscere il preprocessore, a installarlo e a conoscere alcune delle sue funzionalità.

Cos'è SASS?

SASS (Fogli di stile sintatticamente fantastici)- uno dei più popolari. È una raccolta di funzionalità CSS che consente di codificare in modo più rapido ed efficiente. SASS supporta l'integrazione con Firefox Firebug. SassScript ti consente di creare variabili, stili nidificati e selettori ereditati.

SASS ti consente di scrivere rapidamente e facilmente meno codice CSS (a volte molto meno) e di gestirlo dinamicamente come linguaggio di programmazione (a proposito, non è un linguaggio di programmazione). È un ottimo strumento per scrivere CSS più funzionali e più puliti che possono accelerare il flusso di lavoro di qualsiasi designer e sviluppatore.

Perché è necessario SASS?

La maggior parte dei framework frontend, inclusi Bootstrap, Materialise e Foundation, sono realizzati con questo fantastico preprocessore. Conoscere SASS ti aiuterà a utilizzare più funzionalità di questi framework.

Come si usa SASS?

Ci sono molte applicazioni che rendono facile e veloce iniziare a usare SASS: CodeKit, Compass, Koala, ecc. Imparerai a conoscerli in altre parti del tutorial. In questo capitolo, non utilizzeremo applicazioni o strumenti diversi da quelli necessari per eseguire SASS su un computer. Non devi preoccuparti del sistema operativo, perché tutto sarà chiaro a tutti gli utenti.

Download e installazione di SASS

Puoi installare SASS solo su una macchina che ha già Ruby:

• Ruby è preinstallato su Mac, quindi puoi installare Sass su Macintosh subito;
• Se sei su Windows, dovrai prima scaricare Ruby;
• Ruby su Linux può essere scaricato tramite il gestore di pacchetti apt, rbenv o rvm.

Dopo aver installato Ruby sulla tua macchina, puoi installare SASS. Apriamo una riga di comando di Ruby e installiamo SASS sul tuo sistema:

Gem installa sass

Se il comando sopra non funziona, potresti dover usare il comando sudo:

Sudo gem installa sass

Se vuoi controllare la tua versione SASS usa il seguente comando:

SASS è installato. Creiamo una cartella di progetto e chiamiamola sass-basic. Crea un file html di base con il seguente codice:

Il mio primo progetto sfacciato

Ciao amico, sto imparando SASS ed è davvero fantastico.

Corpo (allineamento del testo: centro;) h1 (colore: # 333;) p (colore: # 666;)

Ora devi compilare questo file usando la riga di comando / terminale. Apriamo una riga di comando nella stessa directory (potrebbe essere necessario utilizzare la riga di comando di Ruby se la riga di comando normale non funziona). Digita quanto segue e premi Invio:

Sass --watch style.scss: style.css

Noterai che sono stati generati nuovi file: style.css e style.css.map. Vale la pena notare che non è necessario toccare il file della mappa così come il file .css. Se desideri apportare modifiche, puoi farlo tramite style.scss. Non è necessario ripetere questo processo ogni volta che si cambia stile. La compilazione SASS funzionerà automaticamente quando vengono apportate modifiche al file .scss.

Nel prossimo capitolo, daremo un'occhiata alle variabili SASS e perché sono la caratteristica SASS più utile (e in qualsiasi altro preprocessore CSS).

Ciao a tutti! Come vola veloce il tempo. Non ho nemmeno notato come sono passato dagli stili di scrittura dal normale Css a un preprocessore Sass. Ma non capivo prima: che tipo di Sass è, a cosa serve, questo è probabilmente per professionisti super avanzati nel layout. Sì, l'uso dei preprocessori è un passo verso un nuovo livello nello sviluppo web, ma non c'è niente di terribile o difficile qui, e lo vedrai da solo leggendo questo articolo fino alla fine.

Quindi, cosa c'è di buono nel preprocessore e in particolare nel Sass? Dirò subito che ce ne sono altri, come Less, Stylus, ecc. Funzionano tutti secondo lo stesso principio, ma ognuno ha le sue caratteristiche. Sass ha guadagnato molta popolarità tra i professionisti, per cui è molto più facile da imparare. È solo che più la tecnologia è popolare, più grande è la comunità e più ampia è la documentazione.

I preprocessori sono progettati per alleviare lo sviluppatore dalla maggior parte delle attività di routine durante la scrittura del codice, aumentando così la velocità e la qualità del lavoro. Oltre ai preprocessori CSS, esistono anche preprocessori HTML come Pug (Jade).

Struttura dell'articolo

Documentazione

Lo sviluppatore di Sass è il francese Hugo Giraudel, che da tempo vive in Germania. Naturalmente la documentazione è in inglese, ma personalmente ne so molto (è importante conoscere l'inglese tecnico). Ma c'è anche una traduzione in russo. Consiglierei comunque la versione inglese, questo è per abituarsi e imparare sempre di più l'inglese. Ma anche il russo non è peggio.

• Documentazione inglese: http://www.sass-lang.com
• Documentazione russa: https://sass-scss.ru

Compilare Sass in Css

Come software per compilare Sass in Css, utilizzo il plugin Sass task manager. In generale, Sass è un'applicazione (Gem) del linguaggio Ruby. Pertanto, se vuoi fare a meno di Gulp, dovrai installare la piattaforma del linguaggio di programmazione Ruby per compilare in Css. Non ti mostrerò come farlo ora, puoi leggerlo sul sito ufficiale.

Sintassi - Sass, Scss

Noto subito che ci sono 2 sintassi per scrivere codice: Sass e Scss.

La sintassi di Sass differisce leggermente da Scss. Scss assomiglia più al normale codice Css e Sass omette le parentesi graffe e il punto e virgola tra le regole. C'è anche una differenza nella scrittura di alcune funzioni e devi stare attento a quale sintassi scegli. Estensioni file per Sass - * .sass, e per Scss - * .scs. La sintassi di Sass è più vecchia e Scss è stato introdotto in seguito per facilitare l'apprendimento dei principianti. Io stesso ho iniziato a studiare questo preprocessore usando Scss, quindi era più facile capirlo. Adesso sono passato a Sass, per me è più comodo.

Se parliamo di Sass, la sua struttura del codice è costruita sulla base dei rientri (dopotutto, non ci sono parentesi graffe in esso) e qui dovresti stare attento, poiché sia ​​il tabulatore (TAB - 4 spazi) che gli spazi ordinari (di solito è un doppio spazio). Uso sempre un tabulatore.

Ricorda! Se usi una tabulazione come rientro, gli spazi dovrebbero essere esclusi in modo che sia lo stesso ovunque. E viceversa: se usi gli spazi, il tabulatore dovrebbe essere escluso. In caso contrario, il compilatore genererà un errore.

Sass

.maincontent .main-title font-size: 30px font-weight: 700 margin: 0 0 30px .description margin-bottom: 30px p colore: # 444444 font-size: 16px line-height: 22px

Scss

.maincontent (.main-title (font-size: 30px; font-weight: 700; margin: 0 0 30px;) .description (margin-bottom: 30px; p (color: # 444444; font-size: 16px; line -altezza: 22px;)))

La maggior parte degli editor di codice (ad esempio, Sublime Text) ha strisce per il rientro, quindi non ci confondiamo. Negli esempi seguenti, userò la sintassi Sass.

Semplificare la vita con Sass

Regole di nidificazione

Questo è quello che mi è piaciuto Sass fin dall'inizio, perché è solo l'annidamento delle regole css l'una nell'altra. Ciò consente di risparmiare molto tempo e il codice è strutturato e di facile lettura. Ad esempio, se vogliamo scrivere stili per elementi di un determinato contenitore genitore, allora in Css dobbiamo specificare ogni volta la classe genitore, ad esempio in questo modo:

Main .title (font-size: 30px; color: # 444;) .main .subtitle (font-size: 20px;) .main .description (font-size: 14px; margin-bottom: 30px;)

Cioè, specifichiamo sempre la classe genitore .main e questo, a sua volta, non è molto conveniente. Usando Sass, può essere scritto in questo modo:

Scss

.main (.title (font-size: 30px; color: # 444;) .subtitle (font-size: 20px;) .description (font-size: 14px; margin-bottom: 30px;))

Sass

.main .title dimensione carattere: 30px colore: # 444 .subtitle dimensione carattere: 20px .descrizione dimensione carattere: 14px margine-fondo: 30px

D'accordo, sembra molto più ordinato e puoi scrivere il codice più velocemente, perché scriviamo la classe genitore.main solo una volta. Se vuoi ripetere dopo di me senza installare Ruby e altri software simili, puoi utilizzare il compilatore online per la dimostrazione.

Proprietà nidificate

Oltre alle regole di nidificazione in Sass, c'è la possibilità di nidificare le proprietà. Ad esempio, ecco come scrivere i valori dei margini:

Sass

.main .title margine: in alto: 10px a destra: 15px in basso: 10px a sinistra: 15px

CSS

.main .title (margin-top: 10px; margin-right: 15px; margin-bottom: 10px; margin-left: 15px;)

Associazione o concatenazione del selettore - firma &

La scrittura del nostro codice può essere accelerata e resa ancora più compatta utilizzando la concatenazione (connessione) tramite il simbolo - & ... Come funziona? Ad esempio, abbiamo classi come: .main-title, .main-subtitle, .main-description. In Sass, queste classi possono essere scritte come segue:

Dimensione carattere principale e -titolo: 30px colore: # 444 e -dimensione carattere sottotitolo: 20px & -dimensione carattere descrizione: 14px margine inferiore: 30px

Main-title (font-size: 30px; color: # 444;) .main-subtitle (font-size: 20px;) .main-description (font-size: 14px; margin-bottom: 30px;)

Usando il simbolo & ci stiamo collegando alla classe root, cioè, in questo caso, non è necessario ripetere costantemente root.main. Allo stesso tempo, tieni presente che non abbiamo creato alcun elemento figlio.

/ * Link * / a (colore: rosso;) a: hover (colore: blu;) / * Pseudo-elementi * / .main :: before (content: ""; display: block; font-size: 20px;) .main :: after (content: ""; display: block; font-size: 30px;)

A volte è necessario specificare una catena di selettori fino all'elemento corrente. Puoi, ovviamente, portarlo alla radice, ma per non rompere l'annidamento, puoi scriverlo come segue:

Contenitore principale e larghezza: 700 px

Contenitore .main (larghezza: 700 px)

Muovendo & dopo il selettore, abbiamo cambiato l'ordine di aggancio, ovvero la classe.container in questo caso è la genitore.

Vincolante al selettore genitore, ma di un livello in più

Sopra, come esempio, ho mostrato il codice Sass:

Dimensione carattere principale e -titolo: 30px colore: # 444 e -dimensione carattere sottotitolo: 20px & -dimensione carattere descrizione: 14px margine inferiore: 30px

Ora immagina che ci sia un altro elemento nel blocco del titolo .main che deve essere esplicitamente stilizzato utilizzando l'intera catena padre. Per molto tempo ho solo specificato il nome radice (in questo caso - .main), ma questo non è molto conveniente. Ho iniziato a scavare tra i documenti Sass e ho trovato una soluzione. In effetti, tutto è semplice: dobbiamo dichiarare un collegamento al genitore e usarlo dove necessario.

Ecco come l'ho fatto prima:

Main & -title font-size: 30px color: # 444 .main__icon // specifica root.main, altrimenti, se usi &, verrà ancorato a .ain-title color: # 444 width: 20px & -subtitle font- dimensione: 20px & -descrizione dimensione del carattere: 14px margine inferiore: 30px

E ora puoi fare questo:

Main $ self: & // riferimento genitore & -title font-size: 30px color: # 444 # ($ self) __ icon // invece di & usa il riferimento parent color: # 444 width: 20px & -subtitle font-size: 20 px e descrizione dimensione carattere: 14 px margine inferiore: 30 px

Se noti, abbiamo dichiarato un riferimento al genitore - $ self: &. Mi ricorda un po' un riferimento all'oggetto (this) che ha attivato l'evento in javaScript. Ora, nel posto giusto, possiamo semplicemente chiamarlo # ($ self). Si scopre che tutto è semplice, ma mi sono scervellato e ho pensato che non ci fosse una soluzione a questo problema in Sass.

Main-title (dimensione carattere: 30px; colore: # 444;) .main-title .main__icon (colore: # 444; larghezza: 20px;) .main-subtitle (dimensione carattere: 20px;) .main-description ( dimensione del carattere: 14px; margine inferiore: 30px;)

Modelli vuoti

Accade spesso che diversi elementi abbiano una base di stile, ma differiscano l'uno dall'altro solo per alcune regole. Prendi i pulsanti per esempio. Se prendiamo una dimensione di pulsanti, possono differire l'uno dall'altro solo per il colore: rosso, verde, grigio, ecc. Se usi Css puro, dovrai specificare tutti i colori dei pulsanti negli stili di base separati da virgole o creare una classe di base. Ma Sass lo rende molto più semplice:

% pulsante colore di sfondo: # 666 bordo: 1px solido # 666 imbottitura: 0 20 px dimensione carattere: 15 px altezza linea: 40 px altezza: 40 px .button-green @extend% pulsante sfondo-colore: verde bordo-colore: verde. button-red @extend% button background-color: red border-color: red

Pulsante verde, .pulsante rosso (colore di sfondo: # 666; bordo: 1 px solido # 666; imbottitura: 0 20 px; dimensione del carattere: 15 px; altezza della linea: 40 px; altezza: 40 px;) .pulsante verde ( background-color: verde; border-color: verde;) .button-red (background-color: rosso; border-color: rosso;)

Il modello in questo caso è il selettore del pulsante% (questo è indicato dal segno -%). Questo è conveniente perché il selettore del modello stesso non è coinvolto da nessuna parte e i suoi stili sono ereditati da altri selettori attraverso la direttiva - @estendere... Questo modello può essere utilizzato tutte le volte che vuoi, riducendo così la quantità di codice.

SassScript

In Sass, come nei linguaggi di programmazione, ci sono possibilità come: creazione di variabili, operazioni aritmetiche (addizione, sottrazione, divisione, moltiplicazione, ecc.), iterazioni (loop), funzioni (mixin) e molto altro. Cioè, Sass è una sorta di linguaggio di programmazione progettato per semplificare la scrittura del codice e accelerare il lavoro a volte.

Variabili

Una variabile in Sass inizia con un segno $ , e il nome è scritto in latino, ad esempio: $ color. Va notato che i segni: " — " e " _ »Sono intercambiabili. Ad esempio, se hai chiamato $ color-red, puoi chiamare anche $ color_red. La variabile è definita come segue: $ nome: valore, ad esempio: $ color: # f6f6f6.

Una variabile dichiarata al di fuori di qualsiasi livello di nidificazione è disponibile globalmente, ad es. può essere utilizzato ovunque. Se hai definito una variabile a qualsiasi livello di nidificazione del selettore, allora sarà disponibile solo a questo livello. Affinché funzioni globalmente nell'intero documento, è necessario specificare la parola chiave ! globale.

Titolo $ dimensione carattere: 10px Dimensione globale carattere: $ dimensione carattere .sottotitoli dimensione carattere: $ dimensione carattere

In generale, le variabili sono una cosa meravigliosa, vale la pena dichiarare e impostare un valore, e poi puoi usarlo quanto vuoi, ovunque. Ad esempio, possiamo definire i colori assegnando loro nomi specifici, dimensione del carattere, famiglia di caratteri, ecc. e in generale tutti i valori.

Direttive

@estendere

Abbiamo toccato questa direttiva sopra quando abbiamo studiato il template-blank. Consolidiamo ancora una volta le nostre conoscenze. attraverso @estendere possiamo copiare le regole di qualsiasi selettore. Ad esempio, durante il layout può essere che l'elemento “ UN"E l'elemento" B"Potrebbe essere simile nell'aspetto. In questo caso, puoi scrivere le regole per l'elemento "A", e per "B" basta copiare gli stili dell'elemento "A", ridefinendo leggermente le proprietà richieste.

Block_a background-color: #cccccc bordo: 5px solido # 999999 padding: 20px font-size: 30px altezza: 150px larghezza: 150px .block_b @extend .block_a padding: 15px

Block_a, .block_b (colore di sfondo: #cccccc; bordo: 5px solido # 999999; padding: 20px; dimensione del carattere: 30px; altezza: 150px; larghezza: 150px;) .block_b (padding: 15px;)

In questo esempio, abbiamo disposto 2 quadrati identici. Per il quadrato "B" abbiamo sovrascritto solo il padding: 15px. Ecco come funziona @extend. Uso questa direttiva abbastanza spesso.

@importare

Questa direttiva consente di combinare più file di stile in uno. Questo è molto conveniente, soprattutto se il progetto è di grandi dimensioni. Da non confondere con la direttiva che esiste in Css - @importare... In Css, l'attributo richiesto è - URL ().

In effetti, è più comodo scrivere stili in file diversi e ognuno ha il suo scopo. Ad esempio, l'intera struttura della pagina può essere suddivisa in regioni: header.sass, sidebar.sass, footer.sass. Puoi raccogliere tutto nel file principale main.sass, semplicemente usando @import. I file di regione possono anche essere specificati con un carattere di sottolineatura all'inizio del nome del file, ad esempio: _header.sass, _sidebar.sass, _footer.sass. Questi file sono chiamati frammenti. Quando si importano frammenti, non è necessario specificare l'estensione del file.

Importazione semplice

@import "header.sass" @import "sidebar.sass" @import "footer.sass"

Importazione di frammenti

@import "header" @import "sidebar" @import "footer"

I file di frammenti possono avere estensioni: * .sass, * .scss o * .css... Ad esempio, il file principale può avere l'estensione * .sass e l'intestazione del sito, ad esempio, con l'estensione * .scss... Cioè, non importa quale sia l'estensione del tuo file principale. Va notato che durante l'importazione, tutte le variabili e i mixin (ne parleremo di seguito) vengono trasferiti nel file principale in cui avviene l'importazione.

Inoltre, puoi specificare l'importazione di più file separati da virgole: @import "header", "sidebar", "footer".

Tieni presente che l'importazione avviene nel luogo in cui hai specificato la direttiva @importare... Questo di solito viene fatto all'inizio del documento.

@ alla radice

Direttiva @ alla radice parla da solo e se tradotto in russo suonerà così: "Dalla radice"... In altre parole, spostiamo il selettore alla radice, sovrascrivendo la catena di selettori padre. Qui, ovviamente, puoi porre la domanda: "Perché è necessaria questa direttiva se puoi spostare manualmente il selettore nella radice?" La risposta è semplice: la comodità di scrivere codice senza rompere la struttura. Quando imparerai a lavorare al meglio con Sass, lo capirai.

Main & -title font-size: 30px color: # 444 @ at-root .main__icon color: # 444 width: 20px

Titolo principale (dimensione carattere: 30 px; colore: # 444;) .main__icon (colore: # 444; larghezza: 20 px;)

Direttive ed espressioni di controllo

@If direttiva

Questa direttiva esegue gli stili se l'espressione racchiusa in essa restituisce un valore diverso da falso e nullo.

$ color: green .header @if $ color == green background-color: green @else if $ color == blue background-color: blue @else background-color: # f6f6f6

Intestazione (colore di sfondo: verde;)

Coloro che hanno familiarità con almeno le basi di un linguaggio di programmazione (ad esempio javaScript o Php) non saranno difficili da capire. Qui l'essenza è la stessa, l'importante è conoscere la sintassi per scrivere il codice.

@Per direttiva

In un linguaggio di programmazione (sempre in Javascript o Php) usando Per puoi impostare un ciclo In Sass, questa direttiva fa lo stesso: crea un ciclo. Per ogni iterazione (ripetizione), viene utilizzata una variabile contatore che modifica i dati di output.

La direttiva ha 2 forme di scrittura: 1. @for $ var from<начало>attraverso<конец>e 2. @per $ var da<начало>a<конец>... Se vuoi che l'ultima cifra sia inclusa nel ciclo, usa " attraverso". Facciamo un esempio:

@for $ i da 1 a 6 .elem-item - # ($ i) background-image: url ("images / image - # ($ i) .jpg")

Elem-item-1 (immagine di sfondo: url ("images / image-1.jpg");). Elem-item-2 (immagine di sfondo: url ("images / image-2.jpg");). elem-item-3 (immagine di sfondo: url ("immagini / immagine-3.jpg");). elem-item-4 (immagine di sfondo: url ("immagini / immagine-4.jpg");). elem-item-5 (immagine di sfondo: url ("immagini / immagine-5.jpg");)

Per indicare il valore finale ho utilizzato la parola chiave “ a". In questa situazione il ciclo termina con una cifra - 5 ... Nota come appare compatto il codice Sass.

@Ogni direttiva

Direttiva @ogni proprio come @for visualizza i valori in un ciclo ed è conveniente in quanto oltre ai numeri, puoi iterare su valori specifici. Prendiamo il ciclo precedente e cambiamolo in alcuni valori.

@each $ bgItem in animali, lago, mare, paesaggio, natura .elem-item - # ($ bgItem) background-image: url ("images / image - # ($ bgItem) .jpg")

Elem-item-animal (immagine di sfondo: url ("images / image-animal.jpg");). Elem-item-lake (immagine di sfondo: url ("images / image-lake.jpg");). elem-item-sea (immagine di sfondo: url ("images / image-sea.jpg");). elem-item-landscape (immagine di sfondo: url ("images / image-landscape.jpg");). elem-item-nature (immagine-sfondo: url ("immagini / natura-immagine.jpg");)

In questo caso, non viene creata una variabile contatore e il numero di iterazioni dipende dal numero di valori creati dopo la parola chiave " in". I valori vengono visualizzati tramite una variabile (in questo esempio - $ bgItem), il cui nome può essere arbitrario.

Mixin (funzioni)

I mixin (mixin) sono un tipo di funzione, come in un linguaggio di programmazione, progettato per eliminare il codice ripetitivo. I mixin possono contenere interi blocchi di stili consentiti in Sass. Facciamo un esempio per chiarezza.

@mixin align-center position: assoluto in alto: 50% a sinistra: 50% transform: translate (-50%, -50%) .container @include align-center

Il mixin viene creato dalla direttiva @mixin, seguito dal nome del mixin, nonché dai parametri passati facoltativamente, separati da uno spazio. Immediatamente, noto che i caratteri trattino (-) e sottolineatura (_) nel nome del mixin sono intercambiabili. Mixin può contenere non solo regole, ma anche selettori. Sopra, ho fornito un esempio di un mixin elementare senza parametri.

Il mixin viene chiamato dalla direttiva @include e quindi, separato da uno spazio, indichiamo il nome del mixin creato. Nell'esempio sopra, si tratta di centrare il blocco lungo l'asse X e lungo l'asse Y utilizzando il posizionamento assoluto. Se devi usarlo spesso, sarai d'accordo che è più facile chiamare solo un mixin che scrivere stili di centratura più e più volte.

Ora diamo un'occhiata a un mixin con parametri (argomenti).

@mixin bordo ($ larghezza, $ colore) bordo: larghezza: $ larghezza stile: tinta unita: $ colore .square @include bordo (2px, #ccc)

Quadrato (larghezza bordo: 2px; stile bordo: solido; colore bordo: #ccc;)

Come puoi vedere, dopo il nome del mixin tra parentesi, impostiamo gli argomenti, in questo caso, la larghezza del bordo e il colore. Questo è il mixin più semplice che ho incluso per chiarezza. In pratica, puoi trovare mixin più complessi utilizzando condizioni e variabili diverse. Ma non complichiamo tutto ora, dobbiamo sempre iniziare con qualcosa di piccolo e semplice, e poi andare avanti man mano che saliamo.

Questo conclude la mia piccola panoramica del preprocessore Sass. Perché piccolo? Perché non è tutto quello che ti ho detto. In generale, usando quanto sopra, puoi iniziare a usare Sass invece di Css in questo momento. Puoi saperne di più su Sass facendo riferimento alla documentazione che ho fornito sopra.

Bene, grazie a tutti per l'attenzione! Come sempre facciamo domande nei commenti e ci iscriviamo o al canale telegram o alla newsletter via mail (modulo nella barra laterale a destra) per non perderci nulla di interessante.

Ci vediamo negli altri miei post...

L'articolo "SASS per i progettisti e non solo" per il 21/02/2013 è stato rinominato in " sintassi SASS"e aggiornato (2014-02-17)

Sassè un linguaggio preprocessore; i preprocessori compilano il codice CSS che scriviamo nel linguaggio di elaborazione (SASS) in puro codice CSS.

La documentazione SASS è più orientata ai programmatori, quindi i progettisti non sono sempre disposti a iniziare a lavorare con SASS. Inoltre, i vantaggi dell'utilizzo di SASS dal punto di vista dei progettisti non sono sempre esplicitamente dichiarati.

In questo articolo, voglio coprire alcuni semplici principi. Non sono un esperto di SASS, ma devo sottolineare che usare sass è una decisione saggia.

Quindi quali sono questi vantaggi? Sarai in grado di strutturare logicamente il tuo codice, velocizzando così il processo di scrittura del codice; il numero di ripetizioni sarà notevolmente ridotto (le variabili ci aiuteranno in questo), il codice diventerà molto più facile da mantenere. Il linguaggio SASS semplifica il lavoro su un progetto, indipendentemente da chi sei, un programmatore o un designer. Questo è davvero il caso.

Variabili

In SASS, il nome variabile inizia con il simbolo del dollaro ($). I valori delle variabili sono identici ai valori delle proprietà CSS.

Cominciamo con le basi, vale a dire le variabili. Esaminiamo le variabili in base al seguente esempio. Tendiamo a usare più colori nel nostro documento. Di conseguenza, devi scrivere più e più volte i valori dei colori in formato esadecimale o rgb. Se vogliamo cambiare qualsiasi colore, dovremo passare attraverso la sostituzione automatica in tutto il documento. Detto questo, non possiamo essere sicuri di non acquisire valore non necessario.

A (colore: # 822733;) .summary (colore: # 822733;) .copyright (colore: # 822733;)

Ad esempio, puoi avere diverse regole che definiscono il colore rosso scuro per i selettori desiderati. Il linguaggio SASS ci permette di fare quanto segue: all'inizio del documento, possiamo definire una variabile denominata $ brand-color e poi nel documento, al posto del valore stesso, mettere il nome della variabile. Quindi, se abbiamo bisogno di cambiare il colore, dobbiamo solo cambiare il valore della variabile $ brand-color e questo cambierà il colore di tutte le regole che usano la variabile $ brand-color.

// La mia libreria dei colori SASS $ brand-color: # 822733; a (colore: $ colore-marca;) .summary (colore: $ colore-marca;) .copyright (colore: $ colore-marca;)

Valori numerici per variabili

Le variabili possono contenere non solo stringhe, ma anche numeri che è possibile manipolare. Se stai utilizzando le griglie o se il tuo layout viene ridimensionato in base a valori specifici, probabilmente stai utilizzando quei valori in tutto il tuo file di stile. Ad esempio, se utilizzi costantemente 10 px, puoi definire una variabile, ad esempio $ unit = 10 px. Questa variabile può essere utilizzata ripetutamente nel codice. Come al solito, il valore (10px) verrà sostituito dal nome della variabile.

Ma cosa succede se è necessario raddoppiare il valore di una variabile? Ad esempio, supponiamo di voler raddoppiare il margine inferiore di un elemento. Usando SASS, puoi aggiungere alcuni semplici calcoli (+, -, *, /,%), ad esempio, per il nostro caso:

$ unità = 10 px; h1, h2, h3 (margine inferiore: $ unità;) p (margine inferiore: $ unità;) a parte (margine inferiore: $ unità * 2; / * 20px * /) footer (margine superiore: $ unità * 4; / * 40 pixel * /)

impurità

additivo può essere paragonato a un blocco di dichiarazioni ripetute nel codice. Questo è un pezzo di codice che puoi usare ovunque nel tuo documento. Non solo eliminerai le ripetizioni non necessarie, ma renderai anche il tuo codice più pulito, poiché eliminerai la necessità di utilizzare la stessa classe per elementi diversi.

Ad esempio, hai un separatore sul tuo sito che usi abbastanza spesso. Ad esempio, puoi usarli per rompere i blocchi principali (ad esempio articoli e intestazione) o anche paragrafi. Il divisore ha un'imbottitura inferiore, un margine inferiore, un bordo e un'ombra.

Per creare un separatore, puoi aggiungere la classe.shadow-border all'elemento. Ma questo "inquinerà" in modo significativo il tuo file html e css.

Shadow-border (border-bottom: 1px solid # a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba (200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px rgba (200, 200, 200 , 0.6); padding-bottom: 20px; margin-bottom: 40px;)

Se vuoi la struttura corretta nel file css e il markup html pulito, devi aggiungere la regola sopra agli elementi html corrispondenti. Vale la pena notare che se ci sono molti elementi con un separatore, questo "rovinerà" in modo significativo il file di stile, il che rende difficile mantenere il file di stile.

Intestazione, articolo, p.intro (border-bottom: 1px solid # a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba (200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px rgba (200 , 200, 200, 0.6); padding-bottom: 20px; margin-bottom: 40px;)

Usando @mixin, è possibile definire un nome per il blocco di dichiarazione. Questo nome non deve essere associato in alcun modo al tuo codice HTML.

@mixin shadow-border (border-bottom: 1px solid # a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba (200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px rgba (200, 200 , 200, 0.6); padding-bottom: 20px; margin-bottom: 40px;)

Quindi, per includere un mixin su un elemento, devi solo includere il nome del mixin: @include shadow-border;

@mixin shadow-border (border-bottom: 1px solid # a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba (200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px rgba (200, 200 , 200, 0.6); padding-bottom: 20px; margin-bottom: 40px;) article (@include shadow-border;) header (@include shadow-border;) p.intro (@include shadow-border;)

Sembra buono.

Parametri per le impurità

I parametri per i mixin sono specificati tra parentesi dopo il nome del mixin; il contenuto di mixin è racchiuso tra parentesi graffe.

@mixin border-radius ($ raggio: 1px) (-webkit-border-radius: $ raggio; -moz-border-radius: $ raggio; border-radius: $ raggio;) / * USE * / .example-class ( background-color: # 900; @include border-radius (20px);)

Impurità di nidificazione

A volte è molto comodo poter annidare un'impurità in un'altra. Ad esempio, dobbiamo aggiungere un mixin a un mixin esistente:

$ colore del bordo: # a4a4a4; $ unità: 10px; @mixin thin-shadow (-webkit-box-shadow: 0px 2px 5px 0px rgba (200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px rgba (200, 200, 200, 0.6);) @mixin shadow-border (@include thin-shadow; border-bottom: $ unit / 10 solid $ border-color; padding-bottom: $ unit * 2; margin-bottom: $ unit * 4;) articolo (@include shadow-border ;) header (@include shadow-border;) p.intro (@include shadow-border;)

Allegati

I mixin non sono l'unica cosa che puoi annidare nei selettori CSS (o meglio, nei blocchi di dichiarazione in un file sass). In SASS puoi annidare gli elementi l'uno nell'altro... Ciò eliminerà i selettori duplicati e renderà il tuo codice più facile da leggere.

/ * CSS normale * / .module h3 (font-weight: grassetto;) .module p (padding-bottom: 10px;)

/ * scrivi in ​​SASS * / .module (h3 (font-weight: grassetto;) p (padding-bottom: 10px;))

Allegati e @ media query

Gli allegati diventano estremamente utili quando si tratta di media query. Di solito, quando lavori con le query multimediali, devi creare stili aggiuntivi per diverse risoluzioni dello schermo e talvolta anche creare un file di stile separato.

/ * viewport - qualsiasi, inclusi i browser che non supportano @media * / article (font-size: 14px; line-height: 25px;) article h2 (font-size: 18px; padding-bottom: 15px;) / * per finestre da 300 px e più larghe (mobile first) * / solo schermo e @media (larghezza minima: 300 px) (articolo (altezza della linea: 20 px; larghezza: 90%;) articolo h2 (padding-bottom: 10 px;)) / * per finestre da 600 px e più larghe * / solo schermo @media e (larghezza minima: 600 px) (articolo (altezza della linea: 25 px; larghezza: 80%;) articolo h2 (padding-bottom: 15 px;)) / * per 900 px viewports e più ampio * / solo schermo @media e (min-width: 900px) (articolo (width: 60%;)) / * 1200px viewports e più ampio * / @media only screen e (min-width: 1200px ) (articolo ( font-size: 16px; line-height: 30px; width: 50%;) article h2 (font-size: 21px; line-height: 35px; padding-bottom: 20px;))

SASS, d'altra parte, ti consente di annidare tutte le query multimediali direttamente all'interno degli elementi. In questo modo sarà più facile trovare e modificare gli stili che influiscono sul layout reattivo.

Articolo (dimensione carattere: 14 px; altezza linea: 25 px; h2 (dimensione carattere: 18 px; fondo imbottitura: 15 px;) solo schermo @media e (larghezza minima: 300 px) (altezza linea: 20 px; larghezza: 90%; h2 (padding-bottom: 10px;)) @media only screen e (min-width: 600px) (line-height: 25px; width: 80%; h2 (padding-bottom: 15px;)) @media only schermo e (larghezza minima: 900 px) (larghezza: 60%;) solo schermo e (larghezza minima: 1200 px) (dimensione carattere: 16 px; altezza linea: 30 px; larghezza: 50%; h2 (font- size: 21px; line-height: 35px; padding-bottom: 20px;)))

Importare l'istruzione @import in SASS

@Importa operatore
consente di includere il contenuto di un file CSS (SCSS) di terze parti nel file CSS (SCSS) corrente.
@import non può essere inserito dopo qualsiasi dichiarazione diversa da @charset o altro @import.

Per includere contenuto, ad esempio _style_two.scss, devi scrivere in questo modo:

@import "style_two.scss"; / * includi senza trattino basso * /

Importante: se non includi un file specifico, ma una cartella, i file css non verranno generati per i file che iniziano con _ .
Ad esempio, la presenza di un file style.scss comporterà la creazione di style.css, ma non la presenza di un file _some.scss. Quindi, un trattino basso significa che il file non è un foglio di stile indipendente e può essere importato solo in un altro foglio di stile.

Loop in SASS

La sintassi per l'istruzione loop (ciascuno) è la seguente: $ var in ... $ var è il nome della variabile e elencare il valore della variabile $ var.
Invece di $ var, i valori da , quindi il contenuto del ciclo viene visualizzato nel file di stile (in base al numero di valori ).
Ad esempio:

SCSS

@ogni $ animale in puma, lumaca di mare, garzetta, salamandra (. # ($ animale) -icon (immagine di sfondo: url ("/ immagini / # ($ animale) .png");))

Compilato per:

CSS

.puma-icon (immagine di sfondo: url ("/ immagini / puma.png");) .sea-slug-icon (immagine di sfondo: url ("/ immagini / slug.png");) .egret -icon (immagine di sfondo: url ("/ immagini / egret.png");) .salamander-icon (immagine di sfondo: url ("/ immagini / salamander.png");)

@Operatore Estendi

Si verifica spesso una situazione in cui una classe deve avere tutti gli stili di un'altra classe, oltre ai propri stili. La soluzione più comune è utilizzare due classi; il primo contiene stili generali, il secondo - specifici.

L'operatore @extend evita questi problemi consentendo a un selettore di ereditare gli stili da un altro selettore. Ad esempio:

SCSS

.error (border: 1px # f00; background-color: #fdd;) .error.intrusion (background-image: url ("/ image / hacked.png");) .seriousError (@extend .error; border-width : 3px ;)

Compilato per:

CSS

.error, .seriousError (border: 1px # f00; background-color: #fdd;) .error.intrusion, .seriousError.intrusion (background-image: url ("/ image / hacked.png");) .seriousError ( larghezza del bordo: 3px;)

Ciao amici!

Questa è una guida dettagliata al preprocessore Sass per principianti. Qui daremo un'occhiata al preprocessore Sass, ai suoi vantaggi, alla sintassi e agli esempi di utilizzo.

Classe

Più

Zapin

Sponsor del rilascio - partner di hosting: partnerwp.ru

Tutti gli esempi Sass / CSS e il progetto Gulp personalizzato per questo tutorial possono essere scaricati da GitHub.

Sassè uno dei preprocessori CSS più avanzati e stabili e anche uno dei preprocessori più popolari tra i professionisti.

Vantaggi Sass

• Compatibilità con diverse versioni di CSS, grazie alla quale puoi utilizzare qualsiasi libreria CSS nel tuo progetto;
• Un numero enorme di funzioni diverse per ogni occasione. Pochi preprocessori CSS possono vantare funzionalità così ricche;
• Sass è uno dei preprocessori CSS più vecchi e ha molta esperienza negli anni;
• Un'ottima opportunità per utilizzare i framework Sass per semplificare la vita allo sviluppatore. Uno di questi framework è Bourbon, che usiamo in alcune versioni del layout Jedi quando scriviamo Sass;
• Sintassi. Puoi scegliere tra due sintassi più vicine a te: semplificata (SASS) e ampliata simile a CSS (SCSS).

Quando ho conosciuto per la prima volta i preprocessori CSS, io, come molti altri sviluppatori web alle prime armi, non capivo appieno l'idea stessa di utilizzare i preprocessori CSS. Perché creare un livello aggiuntivo, utilizzare alcuni strumenti, complicare i CSS, ho pensato. Ma col tempo, ho iniziato a capire che di giorno in giorno scrivere CSS diventava una tortura, una routine grigia, molte azioni dovevano essere ripetute, selettori, proprietà e persino interi blocchi di codice CSS venivano copiati per ottenere il risultato desiderato. Oggi, con esempi, ti mostrerò come puoi semplificare il tuo lavoro utilizzando il preprocessore Sass, diversificare lo sviluppo e anche divertirti un po' mentre scrivi alcune funzioni più o meno complesse.

Allestire l'ambiente

Come ambiente per lavorare con Sass in questo tutorial, come negli altri nostri tutorial, utilizzeremo la versione Sass del task manager Gulp ( gulp-sass). Per utilizzare la versione originale di Ruby o compilare Sass tramite appositi software, puoi leggere le istruzioni in ufficio. luogo. Questa lezione è per lo più di natura pratica, quindi non ci soffermeremo sulle possibili opzioni per la connessione al progetto, collegheremo Sass nel modo più popolare, utilizzando Gulp.

Assicurati di avere installato l'ultima versione di Node.js e Gulp. Se Node.js non è installato, scaricalo e installalo. Dopo aver installato Node.js, installa gulp con il comando "npm i -g gulp"(Windows) o "sudo npm i -g gulp"(Linux, OSX). Leggi:.

Npm i --save-dev gulp gulp-sass

Var gulp = require ("gulp"), // Include Gulp sass = require ("gulp-sass"); // Include il pacchetto Sass gulp.task ("sass", function() (// Crea l'attività "sass" return gulp.src (["sass / ** / *.Sass", "sass / ** / * .Scss "]) // Recupera il file source.pipe (sass ((outputStyle:" espanso ")). On (" errore ", sass.logError)) // Converti Sass in CSS utilizzando gulp-sass .pipe (gulp. dest (" css ")) // Carica il risultato nella cartella css)); gulp.task ("watch", function () (gulp.watch (["sass / ** / *. sass", "sass / ** / *. scss"], ["sass"]); // Guarda dietro i file sass nella cartella sass)); gulp.task ("predefinito", ["guarda"]);

Notare la riga 6: qui stiamo usando uno degli stili per l'output nel file risultante: nidificato- annidato, per impostazione predefinita; allargato- schierato; compatto- compatto, quando il selettore e le sue proprietà tra parentesi graffe sono visualizzate su una riga; compresso- compresso. Inoltre, grazie alla lavorazione .on ("errore", sass.logError) se si verifica un errore, non dobbiamo ricaricare il comando di esecuzione del Gulpfile e vedremo su quale riga del file Sass abbiamo un errore. Negli esempi userò lo stile di inferenza allargato per chiarezza.

Dovresti avere la seguente struttura di progetto sul tuo filesystem:

• il mio progetto /
  • css /
    • comune.css
  • impertinente /
    • comune.sass
  • node_modules /
  • gulpfile.js
  • pacchetto.json

Iniziamo l'esecuzione del Gulpfile con il comando sorso nel terminale della cartella del progetto.

Qui prendiamo tutti i file Sass dalla directory impertinente / il tuo progetto e carica il risultato CSS finito nella cartella css /... Inoltre, qui impostiamo la sorveglianza guarda per le modifiche nei file Sass e la compilazione automatica in CSS, se tali modifiche avvengono. Il file css risultante è incluso nel layout.

Se sei confuso sulla configurazione dei pacchetti Gulp in questo esempio, leggi il tutorial Gulp.

Dopo che il nostro ambiente è stato configurato e Sass è stato convertito con successo in CSS durante il salvataggio dei file * .sass nella directory impertinente /, puoi tranquillamente continuare ad apprendere ed eseguire gli esempi che analizzeremo oggi nella pratica.

sintassi sass

Ci sono 2 modi per scrivere Sass, 2 sintassi: SASS e SCSS. Il modo più antico di scrivere Sass è sintassi di indentazione... È questa l'ortografia che useremo nel nostro tutorial. L'estensione del file per tale sintassi è * .sass... La seconda opzione è la sintassi, estendere la sintassi CSS, Sassy CSS. SCSS è scritto come un normale CSS, ma esteso con funzionalità aggiuntive di Sass. Estensione file con sintassi SCSS - * .scss.

Molto importante! La sintassi dell'indentazione richiede un'osservanza molto rigorosa dell'indentazione delle proprietà nidificate e se si ottengono errori durante l'esecuzione di Gulp o errori impliciti senza specificare una riga nella console, molto probabilmente l'errore è nell'indentazione errata. Un altro dettaglio importante: se usi le tabulazioni come rientri, il compilatore genererà un errore durante il tentativo di convertire Sass, che, oltre alle tabulazioni, utilizza anche gli spazi come rientri. O usi solo tabulazioni o solo spazi.

Sintassi SASS e SCSS:

SASS - sintassi di indentazione	SCSS - sintassi dell'estensione
$ font-stack: Helvetica, sans-serif $ primary-color: # 333 body font: 100% $ font-stack color: $ primary-color	$ font-stack: Helvetica, sans-serif; $ colore primario: # 333; body (font: 100% $ font-stack; color: $ primary-color;)

Oltre alle regole di ortografia di base (parentesi graffe, punto e virgola alla fine delle righe), SASS e SCSS differiscono anche nel modo in cui alcune funzioni sono scritte. Quindi, fai attenzione quando usi esempi da Internet, controlla quale sintassi viene utilizzata. Se un esempio abbastanza grande da Internet è realizzato in stile SCSS e il tuo progetto è scritto in SASS, puoi importarlo nel tuo file principale senza modificare la sintassi e l'estensione del file usando la direttiva @importare, ad esempio, se hai scaricato il file carosello.scss quindi puoi collegarlo al tuo main.sass corda @import "carosello"... Puoi anche fare il contrario quando devi importare file * .sass nel file main.scss. Nel nostro esempio da GitHub, importiamo tutto _x.x.sass file in uno comune.sass dove x.x è il numero del titolo dell'esempio di questo articolo.

Useremo la sintassi di indentazione.

1. Estendere CSS con Sass

1.1 Regole di nidificazione

Sass offre agli sviluppatori una grande opportunità di utilizzare l'annidamento di alcune regole CSS all'interno di altre, riducendo così i tempi di scrittura/copia di selettori lunghi e rendendo il codice più strutturato, con una chiara gerarchia.

1.2 Associazione a un selettore genitore

Se si desidera estendere il selettore senza creare una nuova regola, è possibile associare ulteriori selettori al selettore già pronto utilizzando il segno & ... Esternamente, sembra creare un selettore figlio nella gerarchia, ma usando & , stiamo estendendo il selettore padre invece di creare il figlio.

Attenzione alla regola corpo.firefox &, che ci permette di ottenere una nuova catena da qualsiasi elemento a quella corrente, se posta alla fine & .

In alternativa, l'associazione genitore può essere utilizzata per creare selettori composti:

1.3 Proprietà allegate

Per comodità, puoi dividere il suffisso dello spazio dei nomi della proprietà in allegati. Ad esempio, margine-superiore, margine-metter il fondo a, margine-sinistra, margine-diritto hanno una base comune margine e può essere suddiviso in allegati come segue:

1.4 Selettori di modelli

A volte si verifica una situazione in cui più elementi della pagina utilizzano la stessa base CSS, lo stesso insieme di proprietà che sono specifiche solo per loro. Queste regole CSS di base possono essere stilizzate come un selettore di modelli da utilizzare in più posizioni in Sass. I selettori di template sono dedotti usando la direttiva @estendere.

2. SassScript

SassScript ti consente di estendere in modo significativo le capacità di Sass attraverso l'uso di variabili personalizzate, aritmetiche e altre funzioni. SassScript può essere utilizzato per generare automaticamente nuovi selettori e proprietà.

2.1 Variabili in Sass

È una funzionalità davvero interessante definire variabili che puoi utilizzare ovunque nel tuo file Sass. Colori, valori predefiniti, unità, tutto questo può essere preso in una variabile e utilizzato in futuro. La variabile è così definita: $ nome: valore.

2.2 Operazioni con numeri e stringhe + interpolazione

Sass consente di utilizzare l'aritmetica dei numeri standard come addizione (+), sottrazione (-), divisione (/) e modulo (%). Operatori di confronto (<, >, <=, >=, ==,! =) sono supportati anche per i numeri.

Inoltre, Sass ha la capacità di concatenare (concatenare) le stringhe.

Come puoi vedere dall'esempio $ somma: 10 + 20/2, la priorità viene osservata nell'esecuzione di operazioni aritmetiche: prima divisione, quindi addizione. Puoi usare le parentesi per definire l'ordine delle azioni, come in matematica. Nota che quando aggiungi 12px + 8px, avremo 20px.

Nota anche le righe 2 e 9, qui usiamo l'interpolazione per posizionare valori dinamici ovunque nel file Sass, incluso dove abbiamo un nome di proprietà, un nome di selettore o su qualsiasi riga.

interpolazione sta ottenendo un nuovo valore usando gli altri.

Molto spesso, l'interpolazione in Sass viene utilizzata per ottenere un nuovo valore di una variabile, grazie alla "integrazione" nel valore di un'altra variabile, mediante la costruzione #{} , Per esempio:

Non puoi semplicemente prendere e inserire una variabile in una stringa senza usare l'interpolazione, come puoi fare in PHP, tra virgolette. Assicurati di utilizzare l'interpolazione variabile.

2.3 Operazioni con i colori

I colori in Sass possono essere aggiunti, sottratti, divisi e moltiplicati. Tutte le operazioni aritmetiche vengono eseguite separatamente per ciascun colore: rosso, verde e blu.

Si noti che quando si aggiungono colori rgba, l'ultima opacità di 0,75 non deve essere diversa dalle altre nell'espressione, altrimenti l'aggiunta avrà esito negativo. Invece, puoi regolare il canale alfa rgba usando opacizzare e rendere trasparente o controlla l'opacità del colore HEX usando la funzione rgba.

3. Direttive e regolamenti

3.1 @importa

Puoi importare nel tuo file Sass sass, scss e css file usando la direttiva @importare, mentre tutti i mixin e le variabili funzioneranno nel file principale in cui avviene l'importazione.

@import funzionerà come il normale CSS @import se:

• il percorso del file contiene http: //;
• il file si chiama via URL ();
• oppure ci sono parametri multimediali nell'importazione.

Affinché un altro file venga completamente importato nel file Sass principale, l'estensione del file deve essere * .sass, * .scss o * .css.

Diamo un'occhiata ad alcuni esempi.

Vengono importati i seguenti file non:

I seguenti file sarà importato:

Attenzione! Nelle nuove versioni gulp-sass css deve essere specificata per importare i file CSS in Sass

È possibile importare più file, separati da virgole: @import "intestazione", "media".

I file che iniziano con un carattere di sottolineatura sono denominati frammenti e durante l'importazione, non richiedono un carattere di sottolineatura e un'estensione. Ad esempio, il file _header.sass può essere importato in questo modo: @import "intestazione".

Nota che l'importazione avviene dove specifichi la direttiva @importare... Di conseguenza, è possibile effettuare importazioni nidificate nel luogo in cui è necessario:

#main @import "esempio"

3.2 @ alla radice

Direttiva @ alla radice eleva il contenuto delle regole alla radice, annullando la catena dal genitore. Tutto è semplice qui:

Non abbiamo trattato tutte le direttive che ci sono in Sass, ma solo quelle più utilizzate nella pratica. Se sei interessato a saperne di più sulle direttive Sass, consulta la documentazione.

4. Espressioni

Sass supporta l'uso di espressioni e funzioni per varie condizioni, implementazioni di cicli e altro.

4.1 La direttiva @if()

Direttiva @Se () consente di eseguire SassScript in determinate condizioni e ha la seguente sintassi:

4.2 La direttiva @for

@per emette un blocco con stili un certo numero di volte. È possibile impostare una variabile contatore in fase di esecuzione.

Puoi specificare attraverso invece di a se si vuole passare da 1 a 11 compreso, e non solo fino a 10, come nell'esempio.

4.3 La direttiva @each

Se vuoi passare attraverso un elenco di valori, non solo numeri, puoi usare la direttiva @ogni:

4.4 La direttiva @while

@mentre esegue il loop dei blocchi di stile mentre l'espressione è vero.

5. Mixin

Mixin- Blocchi di codice Sass (o template mixin) che possono prendere argomenti (opzionali) e possono ampliare notevolmente le possibilità di scrittura degli stili e ridurre il tempo impiegato per applicare lo stesso tipo di regole e anche interi blocchi CSS. È come una funzione che può accettare un argomento, svolgere un'enorme quantità di lavoro e restituire un risultato a seconda del parametro di input.

Mixin è dichiarato dalla direttiva @mixin, dopo l'annuncio dovrebbe essere indicato nome mixina. Chiamato dalla direttiva mixin @includere, che prende il nome del mixin e gli argomenti passati, se presenti.

Amici, abbiamo esaminato le caratteristiche principali di Sass, che sono sufficienti per un lavoro fruttuoso con gli stili del sito CSS. Alcune direttive e funzionalità non sono incluse in questa guida, ma se sei interessato a conoscere tutte le funzionalità di Sass, ti sarà utile.

Risponderò immediatamente alla domanda: come lavorare con gli stili Sass su un sito finito, è davvero necessario modificare il CSS finito e caricarlo tramite FTP? No, non puoi farlo. Dovresti avere una copia locale dei tuoi stili Sass o anche dell'intero sito e dopo aver terminato il lavoro distribuire (caricare) gli stili già pronti tramite FTP. Per questo, puoi usare il pacchetto Gulp vinile-ftp... Oppure configura un ambiente Sass sul tuo server per compilare file di caricamento FTP / sFTP.

È tutto per oggi. Grazie per l'attenzione!