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.

Gi 13-tommers MacBook Air en berøringsskjerm med AirBar

Apple introduserte en berøringslinje til sin nye MacBook Pro, men berøringsskjermen forblir fortsatt uklar på Mac-datamaskinene. For brukerne som venter på en berøringsbasert MacBook, ble det innført en perifer på CES, kalt AirBar, som vil gi MacBook Air en pseudo-berøringsskjerm av forskjellige typer .Laget s

(Tekniske og design tips)

50 nettsteder som betaler deg for å skrive eller blogge

Hvis du elsker å skrive og alltid har hatt en drøm om å se arbeidet ditt, men ikke ønsker å starte eller administrere en blogg for å ha alle dine skrifter, hvorfor ikke skrive for en blogg eller publikasjon og få betalt for det?I dette innlegget har vi samlet 50 nettsteder som vil betale deg for meninger, veiledninger, veiledninger, kreativ skriving og generelt, bra materiale til leserne. Nisje

(Tekniske og design tips)