Share
Du vet borren ganska bra. Vill du ge en del av din webbplats rundade hörn med CSS3? Då behöver du inte mindre än tre leverantörs prefix: webkit, moz och W3C rekommenderade formuläret. Är inte det ett stort slöseri med tid - för att inte tala om skärmutrymme? Om vi istället skulle kunna använda en klass fil? Tja, vi kan! Jag ska visa dig hur idag.
Om vi använder ett verktyg som LESS eller SASS, kan vi skapa vår egen klass filer ganska enkelt. Har ingen aning om vad jag pratar om? Tja, först, granska det här snabba tipset. Det lär dig exakt hur du går upp och kör med Mindre.
Därefter måste vi skapa en kärnklassfil som ska användas i varje projekt. Du kan fria att lagra den här filen var du än vill, men i videon ovan använder jag vår populära (och exklusiva) Structurer-app.
Vi gör den första tillsammans, men var noga med att granska skärmbilden för mer information.
.gränsstråle (@radius: 3px) -webkit-border-radius: @radius; -moz-gränsen-radien: @radius; gränsen: @radius;
När det gäller namngivna konventioner har jag funnit att det är smartaste att använda det officiellt rekommenderade namnet för ditt klassnamn - i det här fallet "border-radius."För att deklarera variabler med Less, förordar vi dem med en @ symbol. I det här fallet ställer vi in ett standardvärde av 3px, men om vi måste överväga det värdet i vårt projekt är det en cinch!
#someElement .border-radius (10px);
Skölj och upprepa just nu för varje egendom som kräver flera leverantörs prefix. Här är en handfull för att komma igång:
.boxskugga (@x: 2px, @y: 2px, @blur: 5px, @spread: 0, @color: rgba (0,0,0, .6)) -webkit-boxskugga: @x @ y @blur @spread @color; -moz-box-skugga: @x @y @blur @spread @color; boxskugga: @x @y @blur @spread @color;
.övergång (@what: allt, @length: 1s, @easing: ease-in-out) -webkit-övergång: @what @length @easing; -moz-övergång: @what @length @easing; -o-övergång: @what @length @easing; övergång: @what @length @easing;
.box (@orient: horizontal, @pack: center, @align: center) display: -webkit-box; display: -moz-box; display: box; -webkit-box-orientering: @orient; -moz-box-orientering: @orient; box-orientering: @orient; -webkit-box-pack: @pack; -moz-box-pack: @pack; box-pack: @pack; -webkit-box-align: @align; -moz-box-align: @align; box-align: @align;
.flex (@val: 1) -webkit-box-flex: @val; -moz-box-flex: @val; box-flex: @val;
Jag skulle gärna höra dina tankar om detta. Om du gillar idén, låt oss turboladda det här stilarket.
Accentsconagua