I preprocessori CSS sono linguaggi di scripting che estendono le funzionalità predefinite dei CSS. Ci permettono di utilizzare la logica nel nostro codice CSS, come variabili, annidamento, ereditarietà, mixin, funzioni e operazioni matematiche. I preprocessori CSS consentono di automatizzare facilmente le attività ripetitive, di ridurre il numero di errori e il gonfiore del codice, di creare frammenti di codice riutilizzabili e di garantire la compatibilità con il passato.
Ogni preprocessore CSS ha una propria sintassi che compila in CSS regolari in modo che i browser possano renderizzarli sul lato client. Attualmente i tre preprocessori CSS più popolari e stabili sono LESS, Sass e Stylus, ma ne esistono molti altri più piccoli. I preprocessori CSS fanno tutti cose simili ma in modo diverso e con sintassi proprie. Ognuno di essi ha alcune caratteristiche avanzate uniche e un proprio ecosistema (strumenti, framework, librerie).
Oggi si parla di MENO.
1. @variabili
Le variabili rendono il tuo codice più facile da mantenere perché ti danno la possibilità di controllare questi valori da un’unica posizione:
// Variables
@link-color: #428bca; // sea blue
@link-color-hover: darken(@link-color, 10%);
// Usage
a,
.link {
color: @link-color;
}
a:hover {
color: @link-color-hover;
}
.widget {
color: #fff;
background: @link-color;
}
1.1 Selettori @nidificati
.button {
&-ok {
background-image: url("ok.png");
}
&-cancel {
background-image: url("cancel.png");
}
&-custom {
background-image: url("custom.png");
}
}
Risultato dopo la compilazione:
.button-ok {
background-image: url("ok.png");
}
.button-cancel {
background-image: url("cancel.png");
}
.button-custom {
background-image: url("custom.png");
}
2. @importazioni
CSS @import fa un’altra richiesta http per recuperare un altro foglio di stile, mentre Less @import prende il contenuto dal file importato e lo include nel foglio di stile compilato. Questo significa una sola richiesta http, che ti permette di creare dei partial e di organizzare il tuo css in modo migliore senza alcuno svantaggio!
Una normale importazione prenderà il contenuto di quel file e lo scaricherà nel file che lo richiede. Utilissimo. La concatenazione dei file è una funzione di vitale importanza dei preprocessori.
/* Normal import */ @import "colors-or-whatever.less";
Un’importazione (di riferimento) non fa questo. Infatti, non inserisce nulla nel file che la richiede. Il codice contenuto in quel file è pronto per essere utilizzato, chiamando un mixin al suo interno o estendendo un selettore.
@import (reference) "https://s3-us-west-2.amazonaws.com/s.cdpn.io/18728/pure.less";
.my-button {
&:extend(.pure-button all);
}
3. @mixins
I mixin copiano tutte le proprietà in un selettore, il che può portare a inutili duplicazioni. Per questo motivo puoi utilizzare le extends invece dei mixin per spostare il selettore fino alle proprietà che desideri utilizzare, il che comporta una minore generazione di CSS.
.a, #b {
color: red;
}
.mixin-class {
.a();
}
.mixin-id {
#b();
}
Risultato dopo la compilazione:
.a, #b {
color: red;
}
.mixin-class {
color: red;
}
.mixin-id {
color: red;
}
4. @estendi
Extend è una pseudo-classe di Less che fonde il selettore a cui viene associata con altri che corrispondono a ciò a cui fa riferimento.
nav ul {
&:extend(.inline);
background: blue;
}
.inline {
color: red;
}
Risultato dopo la compilazione:
nav ul {
background: blue;
}
.inline,
nav ul {
color: red;
}
5. @math
Le funzioni matematiche comprendono metodi utilizzati per eseguire operazioni numeriche come arrotondamento, radice quadrata, potenza, modulo, percentuale, ecc.
@nav-height: 60px;
body {
padding-top: @nav-height + 40px;
}
.nav {
position: fixed;
top: 0;
width: 100%;
height: @nav-height;
}
.one-third {
width: (100% / 3);
}
Risultato dopo la compilazione:
body {
padding-top: 100px;
}
.nav {
position: fixed;
top: 0;
width: 100%;
height: 60px;
}
.one-third {
width: 33.33333333%;
}
6. @loops
Una delle cose migliori di LESS è che puoi creare loop e classi in modo dinamico.
L’esempio che segue è quello di creare dinamicamente delle classi, con incrementi di 10. Avrei potuto scrivere 10 classi, ma questo modo è molto più bello e facile da mantenere.
.mixin-loop (@index) when (@index > 0) {
.per-@{index}0 {
display: inline-block;
width: @index * 10%;
}
.mixin-loop(@index - 1);
}
.mixin-loop(10);
Risultato dopo la compilazione:
.per-100 {
display: inline-block;
width: 100%;
}
.per-90 {
display: inline-block;
width: 90%;
}
.per-80 {
display: inline-block;
width: 80%;
}
.per-70 {
display: inline-block;
width: 70%;
}
.per-60 {
display: inline-block;
width: 60%;
}
.per-50 {
display: inline-block;
width: 50%;
}
.per-40 {
display: inline-block;
width: 40%;
}
.per-30 {
display: inline-block;
width: 30%;
}
.per-20 {
display: inline-block;
width: 20%;
}
.per-10 {
display: inline-block;
width: 10%;
}