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.

Personalizza SoundCloud Audio Player con ToneDen SDK

Lo streaming audio è in circolazione su Internet dal 1990 e non ci sono numerose piattaforme di streaming audio popolari tra cui scegliere. Uno dei più popolari è SoundCloud che presenta alcuni vantaggi distinti rispetto ai suoi concorrenti, incluso l'essere facile da incorporare.Mentre il player incorporato è molto intuitivo e reattivo - puoi metterlo nella barra laterale, in un post o in una home page - puoi limitarti quando si tratta di personalizzare il player. Pu

(Consigli tecnici e di design)

10 plugin Premium WordPress per il 2018 che dovresti sapere

Una selezione giudiziosa di plugin WordPress è un must. Può assicurare che il tuo sito Web WordPress funzioni in modo ottimale. Anche i siti Web che stai costruendo lo faranno.Puoi avere la capacità di offrire ai visitatori esattamente quello che stanno cercando. In questo modo, stai creando una situazione vantaggiosa per i tuoi clienti, per gli utenti del sito web e per te stesso.I

(Consigli tecnici e di design)