guida a less
TRANSCRIPT
![Page 1: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/1.jpg)
06.05.2016, Elias Antonelli
LESS
![Page 2: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/2.jpg)
INDICE
▸ Cos’è …………………………...................……………... slide 3
▸ Installazione ………….…………………………….. slide 5▸ Linguaggio ………….……………………………….. slide
10▸ Bibliografia ………….……………………………… slide
23
2/24LESS - Elias Antonelli
![Page 3: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/3.jpg)
LESS>CSSCOS’É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/24LESS - Elias Antonelli
![Page 4: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/4.jpg)
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/24LESS - Elias Antonelli
![Page 5: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/5.jpg)
LESS>CSS INSTALLAZIONE
Disponibile per command-line e client-side usage. Nemmeno necessaria per lazy-plugin usage.
2.5/24LESS - Elias Antonelli
![Page 6: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/6.jpg)
COMMAND-LINE usage
6/24
sudo apt-get install nodejssudo npm install less -g
LESS - Elias Antonelli
![Page 7: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/7.jpg)
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
![Page 8: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/8.jpg)
LAZY-PLUGIN usage
8/24
LESS CSS Compilerhttps://plugins.jetbrains.com/plugin/7059?pr=
LESS - Elias Antonelli
![Page 9: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/9.jpg)
LESS>CSS dove, come e quandoDurante 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.cssIl 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 USAGELa 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 CompilerProcessa styles.less e crea/sovrascrive styles.css al salvataggio dopo ogni modifica di styles.less
LESS - Elias Antonelli
![Page 10: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/10.jpg)
LESS>CSS LINGUAGGIO3.
10/24LESS - Elias Antonelli
![Page 11: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/11.jpg)
CARATTERISTICHE PRINCIPALI● Variabili● Extend● Mixins● Funzioni integrate
11/24LESS - Elias Antonelli
![Page 12: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/12.jpg)
LESS>CSS variabiliPermettono il controllo di valori, regole o gruppi di regole CSS frequentemente usati.
12/24LESS - Elias Antonelli
http://lesscss.org/features/
![Page 13: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/13.jpg)
@link-color: #428bca;
a { color: @link-color;}
//compila:
a { color: #428bca;}
LESS>CSS variabili
13/24LESS - Elias Antonelli
http://lesscss.org/features/
![Page 14: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/14.jpg)
LESS>CSS variabili
@property: color;
.widget {
@{property}: #0ee;
background-@{property}: #999;
}
//compila:
.widget {
color: #0ee;
background-color: #999;
}
14/24LESS - Elias Antonelli
http://lesscss.org/features/
![Page 15: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/15.jpg)
@my-selector: banner;
.@{my-selector} {
font-weight: bold;
line-height: 40px;
...
}
//compila:
.banner {
font-weight: bold;
line-height: 40px;
...
}
LESS>CSS variabili
15/24LESS - Elias Antonelli
http://lesscss.org/features/
![Page 16: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/16.jpg)
LESS>CSS extendPseudo-classe in grado creare un merge tra regole CSS del selettore a cui è applicato e quelle del selettore referenziato.
16/24LESS - Elias Antonelli
http://lesscss.org/features/
![Page 17: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/17.jpg)
LESS>CSS extend
nav ul:extend(.inline) {
background: blue;
}
.inline {
color: red;
}
//compila:
nav ul {
background: blue;
}
.inline, nav ul {
color: red;
}
17/24LESS - Elias Antonelli
http://lesscss.org/features/
![Page 18: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/18.jpg)
LESS>CSS mixinsCopia il set di regole CSS di un selettore e le incolla all’interno del selettore a cui è applicato.
18/24LESS - Elias Antonelli
http://lesscss.org/features/
![Page 19: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/19.jpg)
LESS>CSS mixins
.my-mixin {
color: black;
}
.class {
.my-mixin;
}
//compila:
.my-mixin {
color: black;
}
.class {
color: black;
background: white;
}
19/24LESS - Elias Antonelli
http://lesscss.org/features/
![Page 20: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/20.jpg)
LESS>CSS mixins parametrici
.border-radius(@radius) {
border-radius: @radius;
}
#header {
.border-radius(4px);
}
//compila
#header {
border-radius: 4px;
}
20/24LESS - Elias Antonelli
http://lesscss.org/features/
![Page 21: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/21.jpg)
LESS>CSS guards & loops
& when (@my-option = true) {
button {
color: white;
}
a {
color: blue;
}
}
21/24LESS - 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/
![Page 22: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/22.jpg)
LESS>CSS funzioni integrate
22/24LESS - Elias Antonelli
http://lesscss.org/functions/
![Page 23: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/23.jpg)
BIBLIOGRAFIA & CREDITS
Un ringraziamento speciale a Susanna che ha prodotto questo stupendo template
▸ http://lesscss.org/▸ https://plugins.jetbrains.com/plugin/7059?pr=
23/24Titolo presentazione - Nome autore
![Page 24: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/24.jpg)
GRAZIE per l’attenzione!
Dubbi o domande?Il mio contatto diretto: [email protected]
LESS - Elias Antonelli
![Page 25: Guida a less](https://reader036.vdocuments.mx/reader036/viewer/2022070510/58aac2031a28ab16338b6f43/html5/thumbnails/25.jpg)
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: