Less è un pre-processore CSS che migliora la leggibilità e la manutenzione del codice, consentendo l'uso di variabili, mixins e strutture nidificate. La sua installazione può avvenire tramite command line o client-side, e offre una serie di funzionalità per semplificare la scrittura e la gestione del CSS. Il documento fornisce dettagli su come installare e utilizzare Less, oltre a descrivere le sue principali caratteristiche e funzioni integrate.

1. 06.05.2016, Elias Antonelli
LESS

2. INDICE
▸ Cos’è …………………………...................……………... slide 3
▸ Installazione ………….…………………………….. slide 5
▸ Linguaggio ………….……………………………….. slide 10
▸ Bibliografia ………….……………………………… slide 23
2/24
LESS - Elias Antonelli

3. LESS>CSS
COS’É
LESS è un pre-processore in grado di compilare un file CSS valido traducendo
un linguaggio che ne semplifica le funzionalità pur aumentandone leggibilità e
possibilità di mantenimento.
1.
3/24
LESS - Elias Antonelli

4. UTILITÀ
● Consente la struttura nidificata di parent e child
● Parametrizza le regole CSS
● È accompagnato da una serie di plugin che
automatizzano procedure tediose tipo gestione di vendor
prefix e minificazione del codice
4/24
LESS - Elias Antonelli

5. LESS>CSS
INSTALLAZIONE
Disponibile per command-line e client-side usage.
Nemmeno necessaria per lazy-plugin usage.
2.
5/24
LESS - Elias Antonelli

6. COMMAND-LINE usage
6/24
sudo apt-get install nodejs
sudo npm install less -g
LESS - Elias Antonelli

7. CLIENT-SIDE usage
7/24
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.min.js" type="text/javascript"></script>
LESS - Elias Antonelli

8. LAZY-PLUGIN usage
8/24
LESS CSS Compiler
https://plugins.jetbrains.com/plugin/7059?pr=
LESS - Elias Antonelli

9. LESS>CSS dove, come e
quando
Durante lo sviluppo, rispetto al tipo di installazione il codice CSS viene compilato in
momenti o in file diversi
COMMAND-LINE USAGE
$ lessc --clean-css styles.less styles.min.css
Il comando processa styles.less e
crea/sovrascrive styles.css ogni volta che viene
lanciato il comando oppure al salvataggio di
styles.less https://www.npmjs.com/package/less-
monitor
CLIENT-SIDE USAGE
La libreria less.min.js processa styles.less e compila
il CSS di output direttamente nell'head del document,
ad ogni caricamento della pagina.
Modalità comoda per lo sviluppo, ma il deploy
deve essere preceduto dalla compilazione di un file
CSS.
9/24
LESS CSS Compiler
Processa styles.less e crea/sovrascrive styles.css al salvataggio dopo ogni modifica di styles.less
LESS - Elias Antonelli

10. LESS>CSS
LINGUAGGIO3.
10/24
LESS - Elias Antonelli

11. CARATTERISTICHE PRINCIPALI
● Variabili
● Extend
● Mixins
● Funzioni integrate
11/24
LESS - Elias Antonelli

12. LESS>CSS variabili
Permettono il controllo di valori, regole o gruppi di regole CSS frequentemente usati.
12/24
LESS - Elias Antonelli
http://lesscss.org/features/

13. @link-color: #428bca;
a {
color: @link-color;
}
//compila:
a {
color: #428bca;
}
LESS>CSS variabili
13/24
LESS - Elias Antonelli
http://lesscss.org/features/

14. LESS>CSS variabili
@property: color;
.widget {
@{property}: #0ee;
background-@{property}: #999;
}
//compila:
.widget {
color: #0ee;
background-color: #999;
}
14/24
LESS - Elias Antonelli
http://lesscss.org/features/

15. @my-selector: banner;
.@{my-selector} {
font-weight: bold;
line-height: 40px;
...
}
//compila:
.banner {
font-weight: bold;
line-height: 40px;
...
}
LESS>CSS variabili
15/24
LESS - Elias Antonelli
http://lesscss.org/features/

16. LESS>CSS extend
Pseudo-classe in grado creare un merge tra regole CSS del selettore a cui è applicato e
quelle del selettore referenziato.
16/24
LESS - Elias Antonelli
http://lesscss.org/features/

17. LESS>CSS extend
nav ul:extend(.inline) {
background: blue;
}
.inline {
color: red;
}
//compila:
nav ul {
background: blue;
}
.inline, nav ul {
color: red;
}
17/24
LESS - Elias Antonelli
http://lesscss.org/features/

18. LESS>CSS mixins
Copia il set di regole CSS di un selettore e le incolla all’interno del selettore a cui è
applicato.
18/24
LESS - Elias Antonelli
http://lesscss.org/features/

19. LESS>CSS mixins
.my-mixin {
color: black;
}
.class {
.my-mixin;
}
//compila:
.my-mixin {
color: black;
}
.class {
color: black;
background: white;
}
19/24
LESS - Elias Antonelli
http://lesscss.org/features/

20. LESS>CSS mixins parametrici
.border-radius(@radius) {
border-radius: @radius;
}
#header {
.border-radius(4px);
}
//compila
#header {
border-radius: 4px;
}
20/24
LESS - Elias Antonelli
http://lesscss.org/features/

21. LESS>CSS guards & loops
& when (@my-option = true) {
button {
color: white;
}
a {
color: blue;
}
}
21/24
LESS - Elias Antonelli
.loop(@counter) when (@counter > 0) {
.loop((@counter - 1));
width: (10px * @counter);
}
div {
.loop(4); // launch the loop
}
div {
width: 10px;
width: 20px;
width: 30px;
width: 40px;
}
http://lesscss.org/features/

22. LESS>CSS funzioni integrate
22/24
LESS - Elias Antonelli
http://lesscss.org/functions/

23. BIBLIOGRAFIA & CREDITS
Un ringraziamento speciale a Susanna che ha prodotto questo
stupendo template
▸ http://lesscss.org/
▸ https://plugins.jetbrains.com/plugin/7059?pr=
23/24
Titolo presentazione - Nome autore

24. GRAZIE per l’attenzione!
Dubbi o domande?
Il mio contatto diretto:
elias.antonelli@openstyle.it
LESS - Elias Antonelli

25. SlidesCarnival icons are editable shapes.
This means that you can:
● Resize them without losing quality.
● Change line color, width and style.
Isn’t that nice? :)
Examples: