Come iniziare con Sass

Sassù è uno strumento potente che porta molte caratteristiche da altre lingue di programmazione in CSS - come funzioni, variabili e loop - oltre a portare le proprie caratteristiche intuitive come mixins, nidificazione e parziali per citarne alcuni.

In questo tutorial creeremo icone sociali utilizzando loop, mixins e funzioni di Sass. Useremo anche il potente nidificazione disponibile in Sass.

• Cos'è il sass?

Crearemo una lista in Sass per generare le nostre icone sociali, che consisterà del nome di classe, riferimento del carattere e del colore prima - e successivamente il tooltip.

E utilizzeremo Mixins per creare query dei supporti riutilizzabili e creare una funzione per trasformare un valore pixel in un valore EM. Per fare ciò, creeremo anche una variabile per la nostra dimensione del font di base.

Ci sono un certo numero di modi per installare e utilizzare Sass a seconda del sistema e delle esigenze di strumenti di costruzione - è possibile trovare maggiori dettagli Qui - Tuttavia, utilizzeremo Codepen per compilare il nostro sass in CSS per mantenere le cose il più semplici possibile.

Per sfruttare veramente il potere del sass e non prenderti in un casino di specificità e complessità è necessaria una solida comprensione del CSS. Il particolare sapore del sass utilizzeremo è SCSS (Sassy CSS), il che significa che useremo ancora le parentesi ricci {} nel nostro codice SASS.

Ottieni i file tutorial

Per scaricare i file di esempio per questo tutorial, andare a Filelilo. , Seleziona cose gratis e contenuti gratuiti accanto al tutorial. Nota: la prima volta che gli utenti dovranno registrarsi per utilizzare il file file.

01. Configurare il tuo Codepen CSS

La prima cosa di cui dovremo fare è Crea una nuova penna e modificare alcune delle impostazioni predefinite per l'editor CSS in Codepen. Modificheremo il preprocessore CSS in SCSS e accendere normalizzare e automatico automatico.

02. Inizia a scrivere qualche codice

Ora abbiamo impostato tutto, possiamo iniziare a scrivere un codice. All'interno dell'editor HTML creeremo un contenitore e un numero di elementi all'interno contenenti il ​​collegamento e l'icona per ciascuna delle nostre icone.

I nomi usati qui saranno utilizzati nel nostro elenco Sass come riferimento in CSS. Useremo anche la convenzione di denominazione BEM per i nostri nomi di classe.

 & lt; div class = "social__container" e GT;
  & lt; div class = "social__item" & gt;
  & lt; un bersaglio = "_ vuoto" href = "..."
  class = "social__icon - Twitter" e GT;
  & lt; i class = "icon - twitter" & gt; & lt; / i & gt;
  & lt; / A & GT;
  & lt; / div & gt;
  ...
& lt; / div & gt; 

03. Impostare gli stili di base

Passando all'editor CSS, inizieremo includendo il font-fantastico, impostando una variabile per la nostra dimensione del carattere di base e alcuni stili di base per la pagina.

 @import URL (http://srt.lt/w8yt8);
// variabili
$ base-font-Dimensione: 16 px;
// styling di base.
corpo {
  Dimensioni del carattere: $ BASE-FONT-Dimensione;
  ...
} 

04. Creare una funzione di base

Successivamente creeremo una funzione di base per trasformare un valore pixel su un valore EM utilizzando la nostra variabile '$ base-font-dimensione'.

Le funzioni in Sass vengono create utilizzando '@Function' seguito dal nome della funzione e dall'ingresso utilizzato per eseguire la funzione.

Quindi all'interno della dichiarazione utilizziamo '@return' per emettere il valore quando si utilizza la funzione. "# {} 'Che circonda il calcolo è usato per Interpolazione .

 // funzioni
@Function PX-TO-EM ($ pixel) {
@return # {$ pixel / $ base-font-dimensione} em;
} 

05. Fai mixins.

Continuando con la nostra configurazione Creeremo mixins per semplici query multimediali mobili utilizzando la nostra funzione 'PX-TO-EM', che passeremo in un valore PX per restituire un valore EM.

I mixins vengono creati usando '@mixin' seguito da un nome per il mixin. Poi all'interno della dichiarazione utilizziamo '@content' per emettere il codice che abbiamo messo all'interno del mixin quando lo chiamiamo più avanti nella nostra basebase.

 @Mixin ViewPort - Large {
  @media solo schermo e
  (Min-Larghezza: PX-TO-EM (1680PX)) {
  @soddisfare;
}}
@Mixin ViewPort - Medium {
  @media solo schermo e
  (Min-Larghezza: PX-TO-EM (1080PX)) {
  @soddisfare;
}} 

06. Configurare un elenco Sass

L'ultimo passo nella nostra configurazione è quello di creare un elenco. Gli elenchi in Sass vengono creati utilizzando una variabile; Dopo che la sintassi esatta è piuttosto sciolta, accettando un'ampia varietà di modi per definirlo .

All'interno della variabile definiremo il nome della classe, il valore unicode e il colore per ogni icona, separandoli con una virgola, tra parentesi all'interno.

 $ Icon-List: (
  Vimeo "\ f27d" # 1ab7a,
  Twitter "\ f099" # 1DA1F2,
  ...
  github "\ f113" # 333,
  RSS "\ f09e" # F26522
); 

07. Mostra le tue icone di fila

Affinché le nostre icone sociali vengano visualizzate in fila aggiungeremo alcuni semplici CSS a ciascuno dei loro contenitori.

 .Social__ITEM {
  display: blocco in linea;
  Margine-a destra: 0,05EM;
} 

08. Creare uno stile icona condiviso

Per ridurre al minimo la quantità di CSS che abbiamo emesso, utilizzeremo un selettore CSS3 per trovare tutte le classi che iniziano con "icona" e creare uno stile condiviso per loro.

 [classe ^ = "icona"] {
  Fammon-family: 'fontawesome';
  Parlare: nessuno;
  Stile font: normale;
  Peso dei font: normale;
  Font-Variant: normale;
  Trasformazione del testo: nessuno;
  Altezza di linea: 1;
  -webkit-font-levigante: antialias;
  -moz-osx-font-levigante: scala di grigi; } 

09. Sfondi di bottoni in alto

Usando lo stesso metodo faremo lo stesso per i pulsanti che definiscono i nostri valori in "EM", consentendoci in seguito a ridimensionarli usando il contenitore.

 [classe ^ = "social__icon"] {
  dimensione del carattere: 1em; Larghezza: 2Em; Altezza: 2Em;
  Sfondo-Color: # 333;
  colore bianco;
  Decorazione del testo: nessuno;
  Border-Radius: 100%;
  Text-Align: Center;
  Display: flex;
  Allinea-Articoli: Centro;
  Giustificazione-Contenuto: Centro;
} 

10. @ @ech loop per le nostre icone

Ora abbiamo tutti i nostri stili di base che possiamo usare il nostro elenco per generare il CSS specifico per ogni icona.

Per creare un ciclo in sass utilizziamo '@each' seguito da nomi per ciascun valore di ciascun elemento - '$ Icon', '$ Unicode' e '$ icon-background' - seguita dalla parola "in" e poi il nome della lista.

All'interno del ciclo applicheremo il valore "$ Unicode" all'elemento Pseudo "prima" di ciascuna icona che abbiamo creato nell'HTML, consentendo allo stile condiviso che abbiamo creato in precedenza per prendersi cura di tutti gli altri stili necessari.

 @ @ @ icona $, $ Unicode, $ icona-background
in $ Icon-List {
  .icon - # {$ icon} {
  & amp; :: Prima {
  Contenuto: $ Unicode;
  }
  }
} 

11. @ @ech loop per i nostri colori di sfondo

Le icone ora sono tutte lavorando ma abbiamo ancora il colore di sfondo di fallback. Aggiungeremo un ulteriore codice alla nostra lista per risolverlo. Usando lo stesso metodo di cui sopra emetteremo il nome "$ Icon", ma questa volta sulle classi "social__icon" e all'interno del colore "$ icona-background".

 @ @ @ icona $, $ Unicode, $ icona-background
in $ Icon-List {
  ...
  .Social__Icon - # {$ icon} {
  Sfondo-Color: $ icona-background;
  }
} 

12. Usa i mixins

Usando i mixins che abbiamo creato in precedenza e perché abbiamo disegnato le icone usando i valori "EM", possiamo applicare una dimensione del carattere al contenitore e aumentarlo utilizzando il nostro mixain della query media utilizzando '@include' e il nome del mixin seguito dal Codice che vogliamo includere nella query dei media.

 .Social__container {
  dimensione del carattere: 1em;
  @include Viewport - Medium {
  Font-Dimensione: 1.5Em;
  }
  @include la vista - grande {
  Dimensione del carattere: 2Em;
  }} 

13. Aggiungi stati di interazione e funzioni integrate

Possiamo aggiungere un po 'di interattività ai nostri pulsanti cambiando il colore di sfondo quando il pulsante è interagito con usando il mouse o la tastiera.

Sass ha un numero di Funzioni di colore integrate Permettendoci di prendere il colore di sfondo che abbiamo impostato nella nostra lista e mescolarlo con il nero per oscurare il pulsante - quando interagito con.

 Icona - # {$ Icon} {
  Sfondo-Color: $ icona-background;
  & amp;: Hover,
  & amp;: messa a fuoco,
  & amp;: attivo {
  colore di sfondo:
  Mix (nero, $ icona-background, 15%);
  }} 

14. Transizione il colore di sfondo

Possiamo anche utilizzare la proprietà "transizione" in CSS per animare le differenze tra i colori dello sfondo. Potremmo usare il valore "Tutto", ma questo è entrambi costoso in termini di prestazioni e non ci consentirebbe di passare valori diversi a diversi tempi e funzioni di temporizzazione.

 [classe ^ = "social__icon"]{
  ...
  Transizione: sfondo di sfondo
  150ms facilità-in-out
  ;
} 

15. Aggiungi ulteriori effetti di transizione

Aggiungendo un posizionamento "relativo" ai pulsanti e un valore superiore e aggiungendo "Top" alla nostra proprietà "transizione" possiamo preparare gli elementi per un'ulteriore interazione.

 [classe ^ = "social__icon"] {
  Posizione: relativo;
  Top: 0;
  ...
  Transizione: sfondo di sfondo
   150 ms facili da alleviare,
    Top 250ms lineare
  ; } 

16. Spostare i pulsanti sull'interazione

Per questa interazione non c'è nulla di specifico necessario per crearlo quindi possiamo aggiungere il codice alla classe condivisa. Applicando un valore superiore negativo e rimuovendo il contorno che abbiamo un cue di interazione visiva ancora più chiaro.

 [classe ^ = "social__icon"] {
  ...
  & amp;: Hover,
  & amp;: messa a fuoco,
  & amp;: attivo {
  Schema: nessuno;
  TOP: -0.25EM;
  }} 

17. Aggiungi un'ombra a goccia

Possiamo anche utilizzare lo stesso metodo per creare e animare un 'box-shadow' - aggiungendo un po 'più profondo per l'interazione - cambiando l'altezza verticale dell'ombra contemporaneamente del valore superiore.

 Box-Shadow:
  0 0 0.25Em -0.25EM RGBA (0,0,0,02);
& amp;: Hover,
& amp;: messa a fuoco,
& amp;: attivo {
  ...
  Box-shadow:
  0 0.5em 0.25Em -0.25EM RGBA (0,0,0,03);
} 

18. Aggiungi strumenti

Possiamo facilmente aggiungere strumenti con CSS per aggiungere ulteriori chiarezza per i nostri utenti. La prima cosa che faremo è aggiungere il valore del tooltip all'elenco. Assicurandosi di scriverli in citazioni per consentire l'uso di spazi se necessario.

 $ Icon-List: (
  Vimeo "Vimeo" "\ f27d" # 1ab7ea,
  Twitter "Twitter" "\ f099" # 1DA1F2,
  ...
  GitHub "GitHub" "\ F113" # 333,
  RSS "RSS" "\ f09e" # F26522,
); 

19. Modifica il ciclo @ @

A causa dell'aggiunta alla nostra lista, avremo bisogno di modificare il nostro loop "@each" per includere il valore del tooltip ('$ name'). Possiamo quindi produrre quel nome come contenuto dell'elemento 'prima pseudo' sui nostri pulsanti.

 @ @ @ icona $, $ NAME, $ Unicode,
  $ icon-background in $ Icon-List {
  ...
  .Social__Icon - # {$ icon} {
  ...
  & amp; :: Prima {
  Contenuto: '# {$ NAME}';
  }
  }} 

20. Stile l'elemento Pseudo Prima

Ora abbiamo il nome di ciascun elemento visualizzato sullo schermo che abbiamo bisogno di modellare l'elemento, aggiungendo un colore di sfondo, imbottitura e altri elementi di styling - oltre a posizionare l'elemento e preparandolo per le transizioni e modificando l'opacità e i valori migliori sull'interazione .

 & amp; :: Prima {...
  TOP: -3.5EM;
  Opacità: 0;
  transizione:
  Top 250ms lineare, opacità 150ms lineare lineare 150ms;
}
& amp;: Hover, ... {...
  & amp; :: Prima {
  Opacità: 1;
  TOP: -2.5EM; }
} 

21. Stile l'elemento dopo pseudo

Noi useremo Triangoli CSS. Per creare il fondo dei nostri strumenti, posizionando nuovamente l'elemento la pronosciando per le transizioni - transizionando l'opacità e i valori superiori a diversi tempi.

Aggiungendo un ritardo otteniamo un'animazione costituita dal tooltip si sbiadisce e si spostando in posizione.

 & amp; :: dopo {...
  TOP: -1.9em;
  Opacità: 0;
  transizione:
  Top 250ms lineare, opacità 150ms lineare lineare 150ms;
}
& amp;: Hover, ... {...
  & amp; :: dopo {
  Opacità: 1;
  Top: -0.9em; }
} 

La raccolta di codepen dei gradini tutorial può essere trovata Qui .

Questo articolo è stato originariamente apparso in Web Designer Magazine Issue 264. Compralo qui .

Per saperne di più:

• Cos'è il sass?
• 8 caratteristiche di Codepen che non sapevi
• 5 consigli per CSS super-veloce