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.

Un'introduzione all'API JavaScript di Web Workers

Web Workers è un'API JavaScript che consente di eseguire script in un thread separato da quello principale . Può tornare utile quando non si desidera alcun ostacolo nell'esecuzione degli script principali, a causa di script in background.L'API Web Workers è supportata in quasi tutti i browser, per informazioni più dettagliate, dai un'occhiata ai documenti CanIUse. Pr

(Consigli tecnici e di design)

Accedi senza password a tutti gli account Microsoft che utilizzano il telefono

Sembra che il futuro degli accessi senza password sia finalmente arrivato, dato che Microsoft ha implementato una funzione simile a tutti i suoi servizi. Da questo punto in avanti, a coloro che si affidano ai batch di servizi di Microsoft (Outlook, Skype, ecc.) Verrà data l'opzione di accedere con il proprio telefono.

(Consigli tecnici e di design)