Share
Du kjenner boret ganske bra. Vil du gi en del av nettstedet ditt avrundet hjørner med CSS3? Deretter trenger du intet mindre enn tre leverandør prefikser: webkit, moz og W3C anbefalte skjemaet. Er det ikke et stort sløsing med tid - for ikke å nevne skjermplass? Hva om vi i stedet kunne bruke en klasse fil? Vel, det kan vi! Jeg skal vise deg hvordan i dag.
Hvis vi bruker et verktøy som LESS eller SASS, kan vi lage vår egen klasse filer ganske enkelt. Har ingen anelse om hva jeg snakker om? Vel, først, gå gjennom dette raske tipset. Det vil lære deg nøyaktig hvordan du kommer opp og kjører med Mindre.
Deretter må vi opprette en kjerneklassefil som skal brukes i hvert prosjekt. Du er velkommen til å lagre denne filen hvor som helst du ønsker, men i videoen ovenfor bruker jeg vår populære (og eksklusive) Strukturapp.
Vi gjør den første sammen, men husk å se på skjermbildet for mer informasjon.
.border-radius (@radius: 3px) -webkit-border-radius: @radius; -moz-grense-radius: @radius; border-radius: @radius;
Når det gjelder å navngi konvensjoner, har jeg funnet ut at det er smart å bruke det offisielt anbefalte navnet for klassenavnet ditt - i dette tilfellet "border-radius."For å erklære variabler med Less, forordner vi dem med en @ symbol. I dette tilfellet setter vi inn en standardverdi på 3px, selv om vi må overstyre den verdien i prosjektet vårt, er det en cinch!
#someElement .border-radius (10px);
På dette punktet, skyll og gjenta for hver eiendom som krever flere leverandørprefikser. Her er en håndfull å komme i gang:
.boksskygge (@x: 2px, @y: 2px, @blur: 5px, @spread: 0, @color: rgba (0,0,0, .6)) -webkit-boks-skygge: @x @ y @blur @spread @color; -moz-box-shadow: @x @y @blur @spread @color; boksskygge: @x @y @blur @spread @color;
.overgang (@what: alt, @length: 1s, @easing: easy-out) -webkit-overgang: @what @length @easing; -moz-overgang: @what @length @easing; -o-overgang: @what @length @easing; overgang: @what @length @easing;
.boks (@orient: horisontal, @pack: senter, @align: senter) display: -webkit-box; display: -moz-box; display: boks; -webkit-boks-orientering: @orient; -moz-box-orient: @orient; boksorientering: @orient; -webkit-box-pack: @pack; -moz-box-pack: @pack; box-pack: @pack; -webkit-box-align: @align; -moz-box-align: @align; boksjustering: @align;
.flex (@val: 1) -webkit-box-flex: @val; -moz-box-flex: @val; box-flex: @val;
Jeg vil gjerne høre tankene dine om dette. Hvis du liker ideen, la oss turbo-lade dette stilarket.
Accentsconagua