it.hideout-lastation.com
Paradiso Per Designer E Sviluppatori


3 Nuove funzionalità CSS LESS che dovresti conoscere

È passato un po 'di tempo dall'ultima discussione su LESS CSS. Oggi, LESS CSS ha raggiunto la versione 1.5 e si è evoluto con nuove funzionalità che lo rendono più potente come pre-processore CSS.

Ci sono state aggiunte nuove aggiunte e in questo post illustreremo 3 delle mie nuove funzionalità preferite, Referencing External File, Extend, Merging Property, che possono aiutarci a scrivere CSS migliori. Diamo un'occhiata.

Importa file

Prima di tutto, diamo un'occhiata a come MENO CSS gestisce i file esterni con la regola @import .

Alcune persone possono dividere il loro foglio di stile in più file, piuttosto che metterlo in un unico piatto. Quindi li importano con @import in un altro foglio di stile, in modo che i Mixin (così come le Variabili ) da quei file possano essere riutilizzati in quell'altro file.

 @import "external.less"; 

Il problema è che LESS compilerà tutti i Mixin da questi file esterni, così che avremmo finito con più regole di stile che definiscono la stessa cosa.

Dai un'occhiata al seguente esempio: Abbiamo due file LESS chiamati style.less e external.less . Importiamo external.less in style.less . Quindi, abbiamo .square mixin in external.less per definire lo stile per le caselle quadrate. All'interno dello style.less, usiamo il mixin in questo modo.

 @import "external"; .box {.square; } 

Ciò produrrà il seguente risultato in CSS. Vengono generate anche le regole di stile del .square, il che non va bene.

 .square {width: 100px; altezza: 100 px; margine: 0 auto; colore di sfondo: rosso; } .box {width: 100px; altezza: 100 px; margine: 0 auto; colore di sfondo: rosso; } 

Nella versione 1.5, LESS ha introdotto (reference), che può essere utilizzato per istruire MENO a utilizzare il file di importazione solo come riferimento e non a produrre il contenuto.

Metti l'istruzione (reference) questo modo:

 @import (reference) "external"; 

Compilare il foglio di stile LESS, e ora il .square non viene prodotto.

 .box {width: 100px; altezza: 100 px; margine: 0 auto; colore di sfondo: rosso; } 

Estendere

Estendere il metodo è pura suggestione. Tecnicamente raggruppa selettori che condividono le stesse regole di stile, il che si traduce in un CSS più pulito e organizzato . Quando costruiamo un sito Web, in alcuni poins, potremmo finire con alcuni selettori con regole di stile strettamente simili, come di seguito:

 .box {width: 100px; altezza: 100 px; margine: 0 auto; bordo: 1px solido nero; colore di sfondo: trasparente; } .box2 {width: 100px; altezza: 100 px; margine: 0 auto; bordo: 1px solido nero; colore di sfondo: rosso; } 

È ridondante e non segue le migliori pratiche, che suggeriscono di mettere insieme gli stessi stili. Sass, in questo caso, è noto con la direttiva @extend per fare questo lavoro, in LESS possiamo fare una cosa simile con &:extend(), introdotto nella versione 1.4.

Dato l'esempio sopra possiamo fare:

 @import (reference) "external"; .box {&: extend (.square); colore di sfondo: trasparente; } .box2 {&: extend (.square); colore di sfondo: rosso; } 

Quando viene compilato su un normale CSS, il codice sopra riportato produrrà:

 .square, .box, .box2 {width: 100px; altezza: 100 px; margine: 0 auto; bordo: 1px solido nero; } .box {background-color: transparent; } .box2 {background-color: red; } 

Unione di proprietà

Un'altra fantastica novità è la fusione di proprietà . Questa funzione si applica alla proprietà CSS che accetta più valori, come trasformazione, transizione e box-shadow . E come suggerisce il nome, unirà i valori che appartengono alla stessa proprietà. Diamo un'occhiata a questo esempio qui sotto.

Come probabilmente già saprai, la proprietà CSS3 Box Shadow accetta più valori di ombreggiatura. Usando questa proprietà di unione, puoi creare facilmente un effetto ombra e renderlo più gestibile.

Qui creiamo due mixin .inner-shadow e .outer-shadow - Immagino che i nomi siano auto-esplicativi.

 .inner-shadow {box-shadow +: inset 10px 10px 5px #ccc; } .outer-shadow {box-shadow +: inset 10px 10px 5px #ccc; } 

Si noti che aggiungiamo un segno + alla fine del nome della proprietà. Questo segno + è necessario per far funzionare questa funzione. Quindi, possiamo usare questi mixin, come segue:

 .box {.inner-shadow; Outer-ombra; } .box2 {.inner-shadow; } .box3 {.outer-shadow; } 

Questo codice ci darà il seguente risultato.

 .box {box-shadow: insetto 10px 10px 5px #ccc, 10px 10px 5px #ccc; } .box2 {box-shadow: inset 10px 10px 5px #ccc; } .box3 {box-shadow: 10px 10px 5px #ccc; } 

Pensiero finale

Queste 3 nuove funzionalità - Referenziamento di file esterni, estensioni, fusione di proprietà - mi hanno spinto a usare MENO di più. Con loro possiamo scrivere meglio e CSS più maneggevoli. Non vedo l'ora di nuove e interessanti funzionalità che LESS offrirà nelle prossime versioni.

Miglior software gratuito di editing fotografico per Windows 10

Miglior software gratuito di editing fotografico per Windows 10

Ogni volta che qualcuno parla di software per l'editing di immagini, il primo nome che viene in mente è Adobe Photoshop. Sebbene Photoshop sia, senza dubbio, il più famoso software di modifica delle immagini, ma mi piace mantenere aperte le mie opzioni e così ho scavato Internet per alcuni utili strumenti di manipolazione delle immagini per Windows che possono rivelarsi delle buone alternative .Po

(Consigli tecnici e di design)

Monitora la produttività (e le distrazioni) su Chrome With Limitless

Monitora la produttività (e le distrazioni) su Chrome With Limitless

È più difficile concentrarsi e ricordare le cose quando lavori online. C'è così tanto da vedere, fare, leggere, guardare, seguire, come, caricare, scaricare e ... hai l'idea. La produttività può fare un tuffo se non sei abbastanza disciplinato, il che è purtroppo vero per la maggior parte di noi.Ma se

(Consigli tecnici e di design)