Introduzioni all'uso dei preprocessori Sass e Less per la stesura di un foglio di stile CSS intelligente Autore: Valerio Radice - valix85 Data: Giugno 2017

1. Giugno 2017, Radice Valerio
Preprocessori

2. 2
Valerio Radice
valerio.radice@nextre.it
WEB DEVELOPER & TEACHER
https://github.com/valix85
https://plus.google.com/+ValerioRadice85
https://it.linkedin.com/in/valix85/it

3. 3
. Introduzione
. Variabili
. Annidamento
. Import
. Mixins
. Extend/Ereditarietà
. Sass vs Less
PREPROCESSORI

4. 4
1.
INTRODUZIONE

5. 5
Il CSS può essere divertente, ma i fogli di stile stanno
diventando sempre più grandi, più complessi e difficili da
mantenere. È qui che i preprocessori ci vengono in aiuto!
I due più famosi sono sicuramente e . In
questa presentazione vedremo principalmente Sass essendo i due
preprocessori molto simili in molte cose. In ogni caso non
disperate, verso la fine faremo un confronto tra i due.
INTRODUZIONE

6. 6
Una volta imparato il CSS ci sono molti vantaggi nell’utilizzo di
un preprocessore. Uno dei più grandi è il dover ripetere parti di
codice, in pratica il tuo CSS diventa Dry (Don’t repeat yourself).
Alcuni vantaggi:
1. Codice pulito con parti riutilizzabili e variabili
2. Risparmi tempo
3. Calcoli e logica
4. Più organizzazione e facile da inizializzare
INTRODUZIONE

7. 7
Sass (e altri preprocessori) ci permettono di utilizzare features
che non esistono nel CSS, come variabili, nesting, mixing,
ereditarietà e altre opzioni che vedremo più avanti.
Per installarlo basterà seguire questa semplice guida:
http://sass-lang.com/install
INTRODUZIONE

8. 8
2.
VARIABILI

9. 9
Pensa alle variabili come un modo per immagazzinare informazioni
che vuoi riutilizzare nel tuo codice.
Puoi immagazzinare colori, gruppi di font o qualsiasi altra
proprietà CSS ti serve. Sass in particolare usa il simbolo $ per
creare una variabile.
VARIABILI

10. 10
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Un esempio:
Quando Sass è processato, prende la variabile che abbiamo
definito in questo caso per $font-stack e $primary-color e
mostra in output normale CSS con il valore della nostra
variabile.
Questo può essere molto utile quando si lavora con colori di
un brand (come il verde Nextre).
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
VARIABILI

11. 11
3.
ANNIDAMENTO

12. 12
IL CSS semplice non è annidato.
Sass permette di aggiungere questa caratteristica, semplificando
di molto la visualizzazione del codice.
L’annidamento segue la stessa gerarchia visuale dell’HTML.
ANNIDAMENTO

13. 13
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Un esempio:
Noterete che ul, li e a sono annidati dentro il selettore nav.
In questo modo il CSS è molto più leggibile.
ANNIDAMENTO

14. 14
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Il CSS generato sarà così:
ANNIDAMENTO

15. 15
4.
IMPORT

16. 16
IL CSS ha un’opzione di import che ti permette di dividere il tuo
CSS in file più piccoli. L’inconveniente è che ogni volta che usi
l’import nel CSS viene creata una nuova richiesta HTTP.
Sass invece combina i due (o più) file senza bisogno di una
richiesta HTTP.
IMPORT

17. 17
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
Mettiamo, per esempio, di avere due file Sass (_reset.scss e base.scss) e
vogliamo importare _reset.css in base.scss:
// base.scss
@import '_reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
IMPORT

18. 18
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
Non c’è bisogno di includere l’estensione del file nell’import, Sass
lo riconoscerà per voi e una volta generato il CSS sarà così:
IMPORT

19. 19
5.
MIXIN

20. 20
Alcune cose in CSS sono veramente tediose e ripetitive da
scrivere, specialmente i tanti vendor prefixes.
I mixins ti permettono di creare gruppi di dichiarazioni CSS
che vuoi riutilizzare nel codice. Vengono specialmente
utilizzati per i vendor prefixes.
MIXIN

21. 21
@mixin my-mix($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include my-mix(10px); }
Per creare un mixin bisogna usare la direttiva @mixin e dargli un nome.
In questo caso l’abbiamo chiamato my-mix. Inoltre utilizziamo la variabile
$radius dentro le parentesi cosicchè possiamo passargli il valore che vogliamo.
Una volta creato il mixin possiamo riutilizzarlo come una dichiarazione CSS
iniziando con @include seguito dal nome del mixin.
MIXIN

22. 22
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
Il CSS generato risulterà così:
MIXIN

23. 23
6.
EXTEND/EREDITARIETA’

24. 24
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
La direttiva @extend ti permette di condividere un gruppo di
proprietà CSS da un selettore ad un altro
EXTEND

25. 25
.message, .success, .error {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
Nell’esempio precedente il codice permetteva di prendere le
proprietà CSS di .message e applicarle a .success e .error.
Quando il CSS viene generato, il codice appare così:
EXTEND

26. 26
7.
SASS vs LESS

27. 27
Se hai familiarità con la programmazione, Sass non sarà nulla
di nuovo. Ha If/else statements, cicli for, cicli while e
foreach. Less ha la maggior parte di queste cose, ma non sono
così complesse.
Less ha diversi ottimi framework, ma niente come Compass. Molti
usano Sass solo per la presenza di Compass.
SASS VS LESS

28. 28
// Sass
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Il modo in cui scrivi le variabili differisce.
Sass usa $, Less il simbolo @. Il problema sorge quando il
simbolo @ è utilizzato da altre parti nel CSS come @media queries
e @keyframes, può creare confusione.
// Less
@font-stack: Helvetica, sans-serif;
@primary-color: #333;
body {
font: 100% @font-stack;
color: @primary-color;
}
SASS VS LESS

29. 29
.looper (@i) when (@i > 0) {
.image-class-@{i} {
background: url("../img/@{i}.png") no-repeat;
}
.looper(@i - 1);
}
.looper(0);
.looper(3);
//--------------- Outputs: --------------------
//.image-class-3 {
// background: url("../img/3.png") no-repeat;
//}
//.image-class-2 {
// background: url("../img/2.png") no-repeat;
//}
//.image-class-1 {
// background: url("../img/1.png") no-repeat;
//}
In less, i cicli sono permessi solo con valori numerici.
SASS VS LESS

30. 30
@each $beer in (stout, pilsner, lager) {
.#{$beer}-background {
background: url("../img/beers/#{$beer}.png") no-repeat;
}
}
// ------------------- Outputs: ---------------------
//.stout-background {
// background: url("../img/beers/stout.png") no-repeat;
//}
//.pilsner-background {
// background: url("../img/beers/pilsner.png") no-repeat;
//}
//.lager-background {
// background: url("../img/beers/lager.png") no-repeat;
//}
In Sass puoi iterare con ogni tipo di dato.
SASS VS LESS

31. 31
// Sass
nav {
margin: 50px auto 0;
width: 788px;
height: 45px;
ul {
padding: 0;
margin: 0;
}
border: {
style: solid;
left: {
width: 4px;
color: #333333;
}
}
}
L’annidamento di Sass è migliore. Tutti e due i preprocessori
hanno l’annidamento, ma Sass porta il tutto ad un gradino
superiore permettendoti di annidare singole variabili.
SASS VS LESS

32. 32
// Less
nav {
margin: 50px auto 0;
width: 788px;
height: 45px;
ul {
padding: 0;
margin: 0;
}
border-style: solid;
border-left: 4px #333333;
}
}
}
Esempio Less senza annidamento singole proprietà:
SASS VS LESS

33. 33
Se non dovete lavorare con qualcosa che si affida a Less (come
Bootstrap fino a poco tempo fa), è sempre preferibile utilizzare
Sass.
La curva di apprendimento di Sass può essere ripida all’inizio,
ma molti concordano sul dire che Sass è migliore sul lungo
periodo.
Sass ha una migliore sintassi
Sass ha più features
Sass supporta Compass
Qualunque preprocessore scegliate, è sempre meglio che non
usarne nessuno. Aumenta la velocità dei vostri lavori e vi rende
più organizzati e ordinati.
SASS VS LESS

34. 34
https://codepen.io/valix85/pen/qjEXgL
DEMO

35. 35
Dubbi o domande?
Il mio contatto diretto:
valerio.radice@nextre.it
GRAZIE per l'attenzione

36. 36
BIBLIOGRAFIA & CREDITS
Un elenco di risorse per approfondire quanto visto in
precedenza
SASS - VideoTutorial 1
SASS - Videotutorial 2
LESS - Videotutorial 1
EMMET - Videotutorial 1
GETTIN START WITH SASS
GETTIN START WITH LESS
HTML 5
HTML1 - HTML2 - HTML3 - HTML4 - HTML5 - HTML6 - HTML7
TOOLS: Koala - VSCODE