no.hideout-lastation.com
Paradis For Designere Og Utviklere


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.

20 fantastiske animerte lastere og spinnere

20 fantastiske animerte lastere og spinnere

Internett-tilkobling blir raskere, men fra tid til annen er det fortsatt noen øyeblikk vi må vente på en nettside å laste. Designere prøver sitt beste for å gjøre ventetiden din morsom og smertefri ved hjelp av ulike kreative animerte lastere .Lastere viser deg at prosessen er i gang. Men for å sørge for at du ikke går bort før prosessen er fullført, ligger hemmeligheten til kjære lastere i oppmerksomhet på detaljer og interessant animasjon . Nedenfor fin

(Tekniske og design tips)

20 svært vanedannende mobile spill du må prøve

20 svært vanedannende mobile spill du må prøve

Hver dag våkner vi opp til et spillskap som strekker seg med nye oppføringer, noe som gjør det perfekte matchspillet mer og mer unnvikende. Hvis du ikke har forsøkt å glemme telefonopplevelsen din, viser forskning at du virkelig bør gi det en tur, for din sanitets skyld, hvis ingenting annet - og en av de beste grunnene til å gjøre det er å lindre stress.Enten du

(Tekniske og design tips)