I preprocessori CSS sono linguaggi di scripting che estendono le funzionalit\u00e0 predefinite dei CSS. Ci permettono di utilizzare la logica nel nostro codice CSS, come variabili, annidamento, ereditariet\u00e0, mixin, funzioni e operazioni matematiche. I preprocessori CSS consentono di automatizzare facilmente le attivit\u00e0 ripetitive, di ridurre il numero di errori e il gonfiore del codice, di creare frammenti di codice riutilizzabili e di garantire la compatibilit\u00e0 con il passato. <\/p>\n
Ogni preprocessore CSS ha una propria sintassi che compila in CSS regolari in modo che i browser possano renderizzarli sul lato client. Attualmente i tre preprocessori CSS pi\u00f9 popolari e stabili sono LESS, Sass e Stylus, ma ne esistono molti altri pi\u00f9 piccoli. I preprocessori CSS fanno tutti cose simili ma in modo diverso e con sintassi proprie. Ognuno di essi ha alcune caratteristiche avanzate uniche e un proprio ecosistema (strumenti, framework, librerie). <\/p>\n
Oggi si parla di MENO<\/strong>.<\/p>\n 1. @variabili<\/strong><\/p>\n Le variabili rendono il tuo codice pi\u00f9 facile da mantenere perch\u00e9 ti danno la possibilit\u00e0 di controllare questi valori da un’unica posizione:<\/p>\n 1.1 Selettori @nidificati<\/strong><\/p>\n Risultato dopo la compilazione:<\/p>\n 2. @importazioni<\/strong><\/p>\n CSS @import fa un’altra richiesta http per recuperare un altro foglio di stile, mentre Less @import prende il contenuto dal file importato e lo include nel foglio di stile compilato. Questo significa una sola richiesta http, che ti permette di creare dei partial e di organizzare il tuo css in modo migliore senza alcuno svantaggio! <\/p>\n Una normale importazione prender\u00e0 il contenuto di quel file e lo scaricher\u00e0 nel file che lo richiede. Utilissimo. La concatenazione dei file \u00e8 una funzione di vitale importanza dei preprocessori. <\/p>\n Un’importazione (di riferimento) non fa questo. Infatti, non inserisce nulla nel file che la richiede. Il codice contenuto in quel file \u00e8 pronto per essere utilizzato, chiamando un mixin al suo interno o estendendo un selettore. <\/p>\n 3. @mixins<\/strong><\/p>\n I mixin copiano tutte le propriet\u00e0 in un selettore, il che pu\u00f2 portare a inutili duplicazioni. Per questo motivo puoi utilizzare le extends invece dei mixin per spostare il selettore fino alle propriet\u00e0 che desideri utilizzare, il che comporta una minore generazione di CSS. <\/p>\n Risultato dopo la compilazione:<\/p>\n 4. @estendi<\/strong><\/p>\n Extend \u00e8 una pseudo-classe di Less che fonde il selettore a cui viene associata con altri che corrispondono a ci\u00f2 a cui fa riferimento.<\/p>\n Risultato dopo la compilazione:<\/p>\n 5. @math<\/strong><\/p>\n Le funzioni matematiche comprendono metodi utilizzati per eseguire operazioni numeriche come arrotondamento, radice quadrata, potenza, modulo, percentuale, ecc.<\/p>\n Risultato dopo la compilazione:<\/p>\n 6. @loops<\/strong><\/p>\n Una delle cose migliori di LESS \u00e8 che puoi creare loop e classi in modo dinamico.<\/p>\n L’esempio che segue \u00e8 quello di creare dinamicamente delle classi, con incrementi di 10. Avrei potuto scrivere 10 classi, ma questo modo \u00e8 molto pi\u00f9 bello e facile da mantenere. <\/p>\n Risultato dopo la compilazione:<\/p>\n\/\/ Variables\n@link-color: #428bca; \/\/ sea blue\n@link-color-hover: darken(@link-color, 10%);\n\n\/\/ Usage\na,\n.link {\n color: @link-color;\n}\na:hover {\n color: @link-color-hover;\n}\n.widget {\n color: #fff;\n background: @link-color;\n}\n<\/pre>\n.button {\n &-ok {\n background-image: url(\"ok.png\");\n }\n &-cancel {\n background-image: url(\"cancel.png\");\n }\n\n &-custom {\n background-image: url(\"custom.png\");\n }\n}\n<\/pre>\n.button-ok {\n background-image: url(\"ok.png\");\n}\n.button-cancel {\n background-image: url(\"cancel.png\");\n}\n.button-custom {\n background-image: url(\"custom.png\");\n}\n<\/pre>\n\/* Normal import *\/\n@import \"colors-or-whatever.less\";\n<\/pre>\n
@import (reference) \"https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/18728\/pure.less\";\n\n.my-button {\n &:extend(.pure-button all);\n}\n<\/pre>\n.a, #b {\n color: red;\n}\n.mixin-class {\n .a();\n}\n.mixin-id {\n #b();\n}\n<\/pre>\n.a, #b {\n color: red;\n}\n.mixin-class {\n color: red;\n}\n.mixin-id {\n color: red;\n}\n<\/pre>\nnav ul {\n &:extend(.inline);\n background: blue;\n}\n.inline {\n color: red;\n}\n<\/pre>\nnav ul {\n background: blue;\n}\n.inline,\nnav ul {\n color: red;\n}\n<\/pre>\n@nav-height: 60px;\n\nbody {\n\tpadding-top: @nav-height + 40px;\n}\n\n.nav {\n\tposition: fixed;\n\ttop: 0;\n\twidth: 100%;\n\theight: @nav-height;\n\n}\n\n.one-third { \n\twidth: (100% \/ 3); \n}\n<\/pre>\nbody {\n padding-top: 100px;\n}\n.nav {\n position: fixed;\n top: 0;\n width: 100%;\n height: 60px;\n}\n.one-third {\n width: 33.33333333%;\n}\n<\/pre>\n.mixin-loop (@index) when (@index > 0) {\n .per-@{index}0 {\n display: inline-block;\n width: @index * 10%;\n }\n .mixin-loop(@index - 1);\n}\n.mixin-loop(10);\n<\/pre>\n.per-100 {\n display: inline-block;\n width: 100%;\n}\n.per-90 {\n display: inline-block;\n width: 90%;\n}\n.per-80 {\n display: inline-block;\n width: 80%;\n}\n.per-70 {\n display: inline-block;\n width: 70%;\n}\n.per-60 {\n display: inline-block;\n width: 60%;\n}\n.per-50 {\n display: inline-block;\n width: 50%;\n}\n.per-40 {\n display: inline-block;\n width: 40%;\n}\n.per-30 {\n display: inline-block;\n width: 30%;\n}\n.per-20 {\n display: inline-block;\n width: 20%;\n}\n.per-10 {\n display: inline-block;\n width: 10%;\n}\n<\/pre>\n