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.

Top 15 QuickStarts per OpenShift

In precedenza abbiamo scritto delle app che è possibile utilizzare per iniziare su OpenShift, il servizio di piattaforma cloud che offre l'utilizzo di quote gratuite. Oggi invece guarderemo QuickStart.QuickStart, come suggerisce il nome, ti consente di "iniziare rapidamente" con OpenShift combinando automaticamente la sorgente di un'app e i suoi requisiti per avviare facilmente nuove app.

(Consigli tecnici e di design)

12 Gli sviluppatori Web di Mac OS X devono sapere

Per gli sviluppatori web, le applicazioni sono fattori importanti per migliorare la produttività; senza avere quelli giusti, lo sviluppo di un singolo sito web potrebbe richiedere molto tempo per gli sviluppatori. Esistono molte applicazioni per lo sviluppo web per ogni piattaforma.In questo post, metteremo insieme le migliori applicazioni OS X che dovresti includere nella toolbox di sviluppo Web .

(Consigli tecnici e di design)