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 leksjoner Avengers kan lære deg om design

20 leksjoner Avengers kan lære deg om design

Avengers: Age of Ultron er for tiden tale om byen, så la oss snakke om dette berømte superlaget. Det er seks forskjellige tegn, hver med sin egen veletablerte franchise, og hver med en unik fargevalg, personlighet og overordnet «følelse». Og mest interessant, hver av dem har noen leksjoner å lære oss.La oss

(Tekniske og design tips)

5 tips for å takle freelancing med en heltidsjobb

5 tips for å takle freelancing med en heltidsjobb

Å jobbe med frilanseprosjekter mens du har en heltidsjobb, kan være lønnsomt, men det kan også bli hektisk.Gi deg selv et øyeblikk til å tenke på de to følgende utfordringene de fleste av oss står overfor med vår nåværende økonomiske situasjon: (1) ingen jobbssikkerhet og (2) inflasjon. Disse utfordringene er nøyaktig hvorfor selv en del heltidsansatte går frilans i fritiden. Ved å suppler

(Tekniske og design tips)