Preprocessori: differenza tra Sass e Less

Un preprocessore CSS è uno strumento utilizzato per velocizzare e ottimizzare la scrittura dei fogli di stile di un sito web. Utilizzando questo strumento si avranno CSS più puliti e preformanti e con l’indubbia utilità di non dovere utilizzare solo regole statiche ma anche costrutti comuni in tutti i linguaggi di programmazione (variabili, funzioni, cicli for, costrutto if, ecc.).

Esistono moltissimi preprocessori CSS e tra i più utilizzati vi sono Sass e Less. Il codice può essere testato sia localmente che online tramite dei tool come sassMeister.com e
lessTester.com. Sass e Less sono molto simili tra loro, differiscono solo in alcuni concetti.

SASS logoLess logo

L’annidamento degli elementi

Sia Sass che Less introducono la possibilità di innestare delle regole in modo da non doverle definire più volte secondo il principio DRY (“Don’t Repeat Yourself“, ovvero non ripetere te stesso). Entrambi i preprocessori consente di innestare le regole CSS tramite le parentesi graffe, vediamo un esempio:

div {
    color: blue;
    font-size: 14px;
    padding: 8px;
    p {
        font-weight: bold;
    }
}

il codice è valido sia per Sass che per Less e sarà compilato nel seguente CSS:

div {
    color: blue;
    font-size: 14px;
    padding: 8px;
}
div p {
    font-weight: bold;
}

In questo ambito Sass offre una funzionalità in più che, oltre alle classi, consente di innestare anche le singole proprietà con suffisso simile:

div {
    font: {
        style: italic;
        weight: 900;
        size: 200%;
        family: "Times New Roman", Georgia, Serif;
    }
}

Che ci restituirà il seguente CSS:

div {
    font-style: italic;
    font-weight: 900;
    font-size: 200%;
    font-family: "Times New Roman", Georgia, Serif;
}

Mixins e ereditarietà dei selettori

I mixin consentono di includere delle proprietà CSS, per poterli utilizzare in Sass si utilizza la direttiva @mixin, mentre in Less si utilizza il selettore della classe. Vediamo un esempio di un mixin in Sass:

@mixin set-padding ($value) {
    padding: $value;
}
div {
    @include set-padding(10px);
}

E’ stato definito un mixin set-padding a cui viene passato un parametro di ingresso per impostare il padding della classe. In Less invece avremo:

.set-padding(@value) {
    padding: @value;
}
div {
    .set-padding(10px);
}

In questo caso è stata definita la classe a cui è possibile passare dei parametri. Per entrambi i codici il CSS generato sarà:

div {
    padding: 10px;
}

In Sass in concetto è più evoluto di Less grazie all’ereditarietà dei selettori. Se si ha a disposizione una classe e si vuole che un’altra classe erediti tutte le sue proprietà, è possibile farlo con la direttiva @extend. Data la seguente classe:

.prima-classe {
    padding: 5px;
    margin: 10px;
    color: red;
    font-size: 20px;
}

In Sass per ereditare tutte le proprietà della classe appena definita basterà scrivere:

.seconda-classe {
    @extend .prima-classe;
}

Il codice risultante sarà:

.prima-classe, .seconda-classe {
    padding: 5px;
    margin: 10px;
    color: red;
    font-size: 20px;
}

Conclusioni

Esistono altre piccole differenze tra i due come la definizione delle variabili (con il $ in Sass e con la @ in Less), la qualità della documentazione fornita o il report generato in caso di errori. Per approfondire il discorso vi rimando a quest’ottimo articolo su keycdn.com

Per concludere, si può affermare che Sass e Less sono molto simili, in genere però Less è più utilizzato da chi si approccia per la prima volta ad un preprocessore CSS in quanto è più facile da installare e da comprendere. Sass risulta leggermente più ostico da installare in quanto richiede Ruby per il suo funzionamento ed è utilizzato maggiormente a livello professionale per le funzionalità che offre (a partire dalla versione 4, Bootstrap ha deciso di scrivere il proprio codice in Sass abbandonando in questo modo Less). Dai dati analizzati, si evince che nel 2016 Sass viene utilizzato dal 66% delle persone, mentre Less solo dal 13.4% degli sviluppatori.

Pubblicato in CSS, Front-end, JavaScript Taggato con: , , , ,

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*