guida a less
TRANSCRIPT
06.05.2016, Elias Antonelli
LESS
INDICE
▸ Cos’è …………………………...................……………... slide 3
▸ Installazione ………….…………………………….. slide 5▸ Linguaggio ………….……………………………….. slide
10▸ Bibliografia ………….……………………………… slide
23
2/24LESS - Elias Antonelli
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
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
LESS>CSS INSTALLAZIONE
Disponibile per command-line e client-side usage. Nemmeno necessaria per lazy-plugin usage.
2.5/24LESS - Elias Antonelli
COMMAND-LINE usage
6/24
sudo apt-get install nodejssudo npm install less -g
LESS - Elias Antonelli
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
LAZY-PLUGIN usage
8/24
LESS CSS Compilerhttps://plugins.jetbrains.com/plugin/7059?pr=
LESS - Elias Antonelli
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
LESS>CSS LINGUAGGIO3.
10/24LESS - Elias Antonelli
CARATTERISTICHE PRINCIPALI● Variabili● Extend● Mixins● Funzioni integrate
11/24LESS - Elias Antonelli
LESS>CSS variabiliPermettono il controllo di valori, regole o gruppi di regole CSS frequentemente usati.
12/24LESS - Elias Antonelli
http://lesscss.org/features/
@link-color: #428bca;
a { color: @link-color;}
//compila:
a { color: #428bca;}
LESS>CSS variabili
13/24LESS - Elias Antonelli
http://lesscss.org/features/
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/
@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/
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/
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/
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/
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/
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/
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/
LESS>CSS funzioni integrate
22/24LESS - Elias Antonelli
http://lesscss.org/functions/
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
GRAZIE per l’attenzione!
Dubbi o domande?Il mio contatto diretto: [email protected]
LESS - Elias Antonelli
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: