Una guida semplice e facile da capire per Sass

Qualche tempo fa Thoriq Firdaus ha scritto un fantastico articolo su come iniziare con Sass che ti ha mostrato come installare e utilizzare questo linguaggio di preprocessore CSS estremamente utile (potresti voler controllare, sai, per iniziare).

In questo articolo ho pensato di darti un po 'di più informazioni su cosa puoi fare con Sass e su come gli sviluppatori lo usano ogni giorno per creare un codice CSS migliore e più modulare. Vai avanti alla sezione che desideri:

• Strumenti del mestiere
• variabili
• annidamento
• Estendere i set di regole
• mixins
• Selettori segnaposto
• operazioni
• funzioni

Strumenti del mestiere

Thoriq ti ha mostrato come puoi usare Sass dalla riga di comando usando il comando sass --watch .

Se preferisci gli strumenti della GUI, puoi utilizzare la mia app preferita, Codekit, uno strumento di sviluppo web per compilare Sass, concatenare, autoprefixing e molto altro. Prepros è un'altra applicazione molto capace che può essere utilizzata su tutti i sistemi. Entrambe sono applicazioni a pagamento ma ne valgono la pena se le utilizzerai a lungo termine.

Se vuoi solo provare Sass senza pagare nulla puoi usare il terminale, o Koala (ecco la nostra recensione), un'app gratuita ricca di funzionalità multipiattaforma, che può mantenere la sua posizione nei confronti delle controparti premium.

variabili

Una delle prime cose che ti serviranno per avvolgere la tua mente sono le variabili. Se provieni da un linguaggio PHP o altro linguaggio di programmazione simile, questa sarà per te una seconda natura. Le variabili servono per memorizzare bit e parti di informazioni riutilizzabili, ad esempio un valore di colore:

 $ primary_color: # 666666; .button {color: $ primary_color; } .important {color: $ primary_color; } 

Questo potrebbe non sembrare utile qui, ma immagina di avere 3000 linee di codice. Se la tua combinazione di colori cambia, dovrai sostituire ogni valore di colore in CSS. Con Sass puoi semplicemente modificare il valore della variabile $primary_color ed essere fatto con esso.

Le variabili vengono utilizzate per memorizzare nomi di font, dimensioni, colori e una miriade di altre informazioni . Per i progetti più grandi, vale la pena estrarre tutte le variabili in un file separato (daremo un'occhiata a come è fatto presto). Ciò che ti permette di fare è ricolorare l'intero progetto e cambiare i caratteri e altri aspetti chiave senza mai toccare le regole CSS attuali . Tutto quello che devi fare è modificare alcune variabili.

annidamento

Un'altra caratteristica base di Sass ti dà la possibilità di annidare le regole . Supponiamo che tu stia creando un menu di navigazione. Hai un elemento di nav che contiene un elenco non ordinato, voci di elenco e collegamenti. In CSS puoi fare qualcosa del genere:

 #header nav {/ * Regole per l'area di navigazione * /} #header nav ul {/ * Regole per il menu * /} #header nav li {/ * Regole per gli elementi dell'elenco * /} #header nav a {/ * Regole per i collegamenti * /} 

Nei selettori, ci stiamo ripetendo molto. Se gli elementi hanno radici comuni, possiamo usare il nesting per scrivere le nostre regole in un modo molto più pulito .

Ecco come potrebbe apparire il codice sopra in Sass:

 #header {nav {/ * Regole per l'area di navigazione * /} ul {/ * Regole per il menu * /} li {/ * Regole per gli articoli dell'elenco * /} a {/ * Regole per i collegamenti * /}} 

L'annidamento è estremamente utile perché rende i fogli di stile (molti) più leggibili . Usando il nesting insieme all'indentazione corretta è possibile ottenere strutture di codice altamente leggibili, anche se si dispone di una buona quantità di codice.

Uno svantaggio del nesting è che può portare a una specificità non necessaria . Nell'esempio sopra ho fatto riferimento ai collegamenti con #header nav a . Potresti anche usare #header nav ul li a che probabilmente sarebbe troppo.

In Sass, è molto più facile essere molto specifici in quanto tutto ciò che devi fare è annidare le tue regole. Quanto segue è molto meno leggibile e abbastanza specifico.

 #header {nav {/ * Regole per l'area di navigazione * / ul {/ * Regole per il menu * / li {/ * Regole per gli articoli dell'elenco * / a {/ * Regole per i collegamenti * /}}}}} 

Estendere i set di regole

L'estensione sarà familiare se lavori con linguaggi orientati agli oggetti. Si capisce meglio attraverso un esempio, creiamo 3 pulsanti che sono lievi variazioni l'uno dell'altro.

 .button {display: inline-block; colore: # 000; sfondo: # 333; border-radius: 4px; imbottitura: 8px 11px; } .button-primary {@extend .button; background: # 0091C2} .button-small {@extend .button; font-size: 0.9em; imbottitura: 3px 8px; } 

Le .button-primary e .button-small estendono tutte la classe .button, il che significa che assumono tutte le sue proprietà e ne definiscono le proprie.

Ciò è immensamente utile in molte situazioni in cui è possibile utilizzare le variazioni di un elemento. Messaggi (avviso / successo / errore), pulsanti (colori, dimensioni), tipi di menu e così via, tutti potrebbero utilizzare la funzionalità di estensione per una grande efficienza CSS.

Un avvertimento è che non funzioneranno nelle query sui media come ci si aspetterebbe. Questo è un po 'più avanzato ma puoi leggere tutto su questo comportamento in Understanding Segnaposti selettori - i selettori di segnaposto sono un tipo speciale di estensione di cui parleremo presto.

mixins

Le mixine sono un'altra caratteristica preferita degli utenti del preprocessore. I mixins sono set di regole riutilizzabili, perfetti per le regole specifiche del fornitore o per la stenografia delle lunghe regole CSS.

Come creare una regola di transizione per gli elementi al passaggio del mouse:

 @mixing hover-effect {-webkit-transition: background-color 200ms; -moz-transition: background-color 200ms; -o-transizione: background-color 200ms; transizione: background-color 200ms; } a {@include hover-effect; } .button {@include hover-effect; } 

I mixins ti permettono anche di usare variabili per definire i valori all'interno del mixin . Potremmo riscrivere l'esempio sopra per darci il controllo sull'ora esatta della transizione . Ad esempio, potremmo volere che i pulsanti passino leggermente più lentamente.

 @mixin hover-effect ($ speed) {-webkit-transition: background-color $ speed; -moz-transition: background-color $ speed; -o-transizione: background-color $ speed; transizione: background-color $ speed; } a {@include hover-effect (200ms); } .button {@include hover-effect (300 ms); } 

Selettori segnaposto

I selettori segnaposto sono stati introdotti con Sass 3.2 e risolto un problema che potrebbe causare un po 'di rigonfiamento nel codice CSS generato. Dai un'occhiata a questo codice che crea messaggi di errore:

 .message {font-size: 1.1em; padding: 11px; border-width: 1px; border-style: solido; } .message-danger {@extend .message; sfondo: # C20030; color: #fff; border-color: # A8002A; } .message-success {@extend .message; sfondo: # 7EA800; color: #fff; border-color: # 6B8F00; } 

È molto probabile che la classe del messaggio non verrà mai utilizzata nel nostro codice HTML: è stata creata per essere estesa, non utilizzata così com'è . Ciò provoca un po 'di gonfiamento nel tuo CSS generato. Per rendere il tuo codice più efficiente puoi usare il selettore segnaposto che è indicato con un segno di percentuale:

 % message {font-size: 1.1em; padding: 11px; border-width: 1px; border-style: solido; } .message-danger {@extend% button; sfondo: # C20030; color: #fff; border-color: # A8002A; } .message-success {@extend% button; sfondo: # 7EA800; color: #fff; border-color: # 6D9700; } 

A questo punto ti starai chiedendo quale sia la differenza tra estensione e mixin. Se usi segnaposti si comportano come un mixin senza parametri. Questo è vero, ma l'output in CSS è diverso. La differenza è che le regole mixin duplicate mentre i segnaposto garantiranno che le stesse regole condividano i selettori, con conseguente riduzione di CSS alla fine.

operazioni

È difficile resistere al gioco di parole qui, ma per ora mi asterrò da qualsiasi barzelletta medica. Gli operatori ti permettono di fare alcuni calcoli nel tuo codice CSS e possono essere davvero utili. L'esempio nella guida di Sass è perfetto per mostrare questo:

 .container {width: 100%; } article {float: left; larghezza: 600px / 960px * 100%; } aside {float: right; larghezza: 300px / 960px * 100%; } 

L'esempio sopra crea un sistema di griglia basato su 960px con problemi minimi. Si compilerà bene con il seguente CSS:

 .container {width: 100%; } article {float: left; larghezza: 62, 5%; } aside {float: right; larghezza: 31, 25%; } 

Un ottimo uso che trovo per le operazioni è quello di mescolare i colori. Se dai un'occhiata al messaggio di successo Sass sopra, non è chiaro se il colore dello sfondo e del bordo abbia una sorta di relazione. Sottraendo una sfumatura di grigio possiamo oscurare il colore, rendendo visibile la relazione:

 $ primario: # 7EA800; .message-success {@extend% button; sfondo: $ primario; color: #fff; border-color: $ primary - # 111; } 

Più chiaro è il colore sottratto, più scura sarà la tonalità risultante. Più leggero è il colore aggiunto, più chiaro è il colore risultante.

funzioni

Esistono numerose funzioni da utilizzare: funzioni numeriche, funzioni stringa, funzioni elenco, funzioni colore e altro. Dai un'occhiata alla lunga lista nella documentazione per sviluppatori. Darei un'occhiata ad una coppia qui solo per mostrarti come funzionano.

La funzione lighten and darken può essere utilizzata per modificare la luminosità di un colore. Questo è meglio che sottrarre sfumature, rende tutto ancora più modulare e ovvio. Dai un'occhiata al nostro esempio precedente usando la funzione di oscuramento.

 $ primario: # 7EA800; .message-success {@extend% button; sfondo: $ primario; color: #fff; border-color: darken ($ primary, 5); } 

Il secondo argomento della funzione è la percentuale di oscuramento richiesta. Tutte le funzioni hanno parametri; dai un'occhiata alla documentazione per vedere cosa sono! Ecco alcune altre funzioni di colore autoesplicative: desaturate, saturate, invert, grayscale .

La funzione ceil, proprio come in PHP, restituisce un numero arrotondato al numero intero successivo. Questo può essere usato quando si calcola la larghezza delle colonne o se non si desidera utilizzare molte posizioni decimali nel CSS finale.

 .title {font-size: ceil ($ heading_size * 1.3314); } 

Panoramica

Le funzionalità di Sass ci danno un grande potere di scrivere CSS migliori con meno sforzo. L'uso corretto di mix, estensioni, funzioni e variabili renderà i nostri fogli di stile più manutenibili, più leggibili e più facili da scrivere.

Se sei interessato a un altro preprocessore CSS simile ti suggerisco di dare un'occhiata a LESS (o controlla la nostra guida per principianti) - il principio sottostante è più o meno lo stesso!

Campi di inserimento del tempo personalizzato con jQuery Timedropper

Alcuni moduli web richiedono input basati sulla data e plug-in di selezione data possono aiutare con quello. Ma che dire degli input temporali ?Con il plugin gratuito jQuery Timedropper, puoi aggiungere timekeeper personalizzati per fissare appuntamenti, pianificare telefonate o praticamente tutto ciò di cui hai bisogno.

(Consigli tecnici e di design)

Come personalizzare il codice di Visual Studio

Codice di Visual Studio, il nuovo editor di codice open source di Microsoft offre agli sviluppatori molte funzionalità straordinarie che facilitano in modo significativo il processo di modifica del codice sorgente . Inoltre, Visual Studio Code assicura anche che gli utenti non si annoino quando lavorano con esso, in quanto consente loro di personalizzare diverse parti del suo aspetto, come colori, caratteri, spaziatura e formattazione del testo, proprio come molte funzionalità, come come linting e regole di validazione .I

(Consigli tecnici e di design)