3 Nye MINDRE CSS-funksjoner du bør vite

Det har vært en stund siden vår siste diskusjon om MINDRE CSS. I dag har LESS CSS nådd versjon 1.5, og den har utviklet seg med nye funksjoner som gjør den sterkere som en CSS-prosessor.

Det har vært en rekke nye tillegg i den, og i dette innlegget kommer vi til å gå gjennom 3 av mine nye favorittfunksjoner, Referanse Ekstern fil, Utvid, Fusjonering av eiendom, som kan hjelpe oss med å skrive bedre CSS. La oss ta en titt.

Filimport

Først av alt, la oss se på hvordan mindre CSS håndterer eksterne filer med @import regelen.

Noen mennesker kan dele stilarket i flere filer, i stedet for å sette det i en pott. Deretter importerer de dem med @import til et annet stilark, slik at Mixins (samt variablene ) fra disse filene kan gjenbrukes i den andre filen.

 @import "external.less"; 

Problemet er at MINDRE vil kompilere alle Mixins fra disse eksterne filene, slik at vi ville ende opp med flere stilregler som definerer det samme.

Ta en titt på følgende eksempel: Vi har to mindre filer kalt style.less og external.less . Vi importerer external.less til style.less . Da har vi .square i external.less for å definere stilen for firkantede bokser. Innenfor stilen. Vi bruker mixin slik.

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

Dette vil produsere følgende resultat i CSS. .square fra .square er også generert - noe som ikke er bra.

 .square {bredde: 100px; høyde: 100px; margin: 0 auto; bakgrunnsfarge: rød; } .box {bredde: 100px; høyde: 100px; margin: 0 auto; bakgrunnsfarge: rød; } 

I versjon 1.5, LESS introdusert (reference), som kan brukes til å instruere MINDRE om å bare bruke importfilen som referanse, og ikke å publisere innholdet.

Sett (reference) instruksjonen på denne måten:

 @import (referanse) "ekstern"; 

.square stilark, og nå er ikke .square utgang.

 .box {width: 100px; høyde: 100px; margin: 0 auto; bakgrunnsfarge: rød; } 

Forlenge

Utvid metode er ren awesomeness. Teknisk grupperer det selektorer som deler de samme stilreglene, noe som resulterer i renere og mer organisert CSS . Når vi bygger et nettsted, på noen poeng, kan vi ende opp med å ha noen selektorer med nøyaktig lignende stilregler, som nedenfor:

 .box {width: 100px; høyde: 100px; margin: 0 auto; grense: 1 px solid svart; bakgrunnsfarge: gjennomsiktig; } .box2 {bredde: 100px; høyde: 100px; margin: 0 auto; grense: 1 px solid svart; bakgrunnsfarge: rød; } 

Det er overflødig, og følger ikke beste praksis, noe som tyder på å sette sammen de samme stilene sammen. Sass, i dette tilfellet, er kjent med sitt @extend direktiv for å gjøre denne jobben, i LESS kan vi gjøre en lignende ting med &:extend(), introdusert i versjon 1.4.

Gitt ovenstående eksempel kan vi gjøre:

 @import (referanse) "ekstern"; .box {&: extend (.square); bakgrunnsfarge: gjennomsiktig; } .box2 {&: utvide (.square); bakgrunnsfarge: rød; } 

Når du samler til vanlig CSS, vil ovennevnte kode produsere:

 .square, .box, .box2 {bredde: 100px; høyde: 100px; margin: 0 auto; grense: 1 px solid svart; } .box {bakgrunnsfarge: gjennomsiktig; } .box2 {bakgrunnsfarge: rød; } 

Sammenslåing av eiendom

En annen kul ny funksjon er sammenslåing av eiendom . Denne funksjonen gjelder for CSS-egenskapen som aksepterer flere verdier, for eksempel transformasjon, overgang og bokseskygge . Og som navnet antyder, vil det fusjonere verdier som tilhører samme eiendom. La oss sjekke ut dette eksemplet nedenfor.

Som du sikkert vet, aksepterer CSS3 Box Shadow-egenskapen flere skyggeverdier. Ved å bruke dette fusjonsegenskapen, kan du enkelt lage skyggeeffekt og gjøre dem mer håndterbare.

Her lager vi to mixins .inner-shadow og .outer-shadow - Jeg antar at navnene er selvforklarende.

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

Legg merke til at vi legger til et + tegn på slutten av eiendommens navn. Dette + -tegnet er nødvendig for at denne funksjonen skal fungere. Så kan vi bruke disse mixins, som følger:

 .box {.inner-shadow; ytterslangen-skygge; } .box2 {.inner-shadow; } .box3 {.outer-shadow; } 

Denne koden vil gi oss følgende resultat.

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

Endelig tanke

Disse 3 nye funksjonene - Henvisning Ekstern fil, Forleng, Sammenslåing Egenskap - Motiverte meg til å bruke MINDRE flere. Med dem kan vi skrive bedre og mer overskuelig CSS. Jeg gleder meg til flere kule nye muligheter som LESS vil tilby i kommende versjoner.

Nemmere Android-utvikling med RoboGuice

RoboGuice er et must-have-rammeverk som gir enkelhet og enkel avhengighetsinjeksjon til Android. Guice er en lettavhengig avhengighetsramme for Java-plattformen. Dependensinjeksjon er et designmønster med kjernevirksomheten for separasjonsadferd fra avhengighetsoppløsning .Det gjør det mulig å fjerne "hardkodede" avhengigheter og gjør det mulig å endre dem på kompilering eller kjøretid. Dette

(Tekniske og design tips)

Alt du trenger å vite om Bitcoin

Mange netizens har hørt om bitcoin, den digitale valutaen. Dette betyr at det eksisterer elektronisk . For å være mer presis, er bitcoin en type kryptokurrency - implikasjonen av sikkerhet og kryptering er viktig.I dette innlegget forsøker vi å identifisere 10 spørsmål om Bitcoins som kan gi deg en klarere forståelse av hva det er, hva det gjør og hvordan du kan bruke det til å kjøpe produkter eller tjenester på nettet.1. Hva er b

(Tekniske og design tips)