En for veien Mer smakfulle Bourbon Mixins

Denne artikkelen er den andre delen av undersøkelsen min i mixins fra Bourbon Sass biblioteket. Blant dem finner du nyttige eksempler som vil øke hastigheten på arbeidsflyten din og minimere Sass-koden din.

En annen liste over godbiter

Vi får en smak av følgende åtte mixins:

• Inline Block mixin
• Plasser mixin
• Triangle mixin
• Clearfix mixin
• Knapp mixin
• Størrelse mixin
• HiDPI media query mixin
• Retina Image mixin

Som i forrige veiledning representerer eksemplene nedenfor ikke nødvendigvis beste designpraksis, men velges for å utforske grunnleggende funksjonaliteten til disse mixins.

Inline Block Mixin

Avsnitt, som standard, vises som blokkere elementer.

HTML:

"html

Yada yada yada

Yada yada yada

"

Blokknivåelementer, for eksempel avsnitt, lager automatisk en ny rad i oppsettet.

Denne blandingen kommer til nytte hvis du vil endre standard visningsadferd av elementer til inline-blokk. Det setter ikke bare skjerm: inline-blokk men tar også vare på kjennskap og arvsstøtte for IE7.

Lær mer om visning på designshack.net.

Sass: Disse blokkene har flyteaktig oppførsel, gjennom inline-blokk.

"css .paragraphs-behaviour-like-blocks + inline-block bakgrunnsfarge: tomat

// SCSS syntaks // .paragraphs-oppføre-lignende blokker @ include inline-block; // "

Ta en titt på den genererte CSS-utgangen. Hvem vil håndtere ekkel ting som det allikevel?

CSS-utgang:

css .paragraphs-behaviour-like-blocks display: inline-block; vertikaljustering: basislinje; zoom: 1; * skjerm: inline; * vertikaljustering: auto; bakgrunnsfarge: tomat;

Satt til skjerm: inline-blokk, avsnittene vises i inline, men beholder sine blokkeringsegenskaper.

Oppmerksomhet! Legg merke til hvite mellomrom mellom blokkelementene. Hvis du brukte flyte For å oppnå samme layout, ville du ikke se noe mellomrom. Det er en slags standard hvite plass, som finnes i HTML, som ikke går bort ved å sette marginer til 0px. I stedet må du fjerne eventuelle tegnhull i selve oppføringen, som vist i denne pennen:

Plasser Mixin

Denne blandingen er en stenografi for å skrive noe som følger:

Sass:

css .some-element posisjon: relative topp: 0px venstre: 100px

Sass:

"css .some-element + posisjon (relative, 0px 0 0 100px) // øverst til høyre nederst til venstre

// SCSS syntaks .some element // @include posisjon (relative, 0px 0 0 100px); "

Det er det. Ingen magi, men fortsatt super nyttig. Å holde stilarkene enkle og lesbare lønner seg over tid.

Triangle Mixin

Ønsker du å bruke CSS-trekanter uten å fitte rundt? Det er absolutt ikke nødvendig å bruke bilder til jobben. Det er lett som tærte med denne blandingen.

Sass:

"css .triangle + triangle (25px, tomat, ned) // størrelse, farge, retning

// SCSS syntaks. Trekant @include trekant (25px, tomat, ned); // "

Den tredje parameteren definerer retningen. Alternativer for denne blandingen inkluderer:

• ned
• opp
• venstre

• Ikke sant

• oppreist
• Opp til venstre
• rett og slett
• ned-venstre

Du kan til og med definere en annen farge hvis du trenger en bakgrunnsfarge for trekanten.

Clearfix Mixin

Beholdere som har flytende elementer i dem, opplever problemet med nullhøydebeholderen. I hovedsak dekker beholderelementet nullpiksler dersom alle dens elementer er flovert og tatt ut av beholderens strømme. I hovedsak er det ingenting igjen å fylle beholderen.

De clearfix mixin tar vare på dette når det brukes på beholderen / innpakningselementet. Det beste med dette er at det ikke krever tilleggs "tom" markering for å imøtekomme clearfixen. Det holder ting semantisk, skiller bekymringer, ved bare å legge til clearfixet i stilarkene dine. Ta en titt på dette svært enkle eksempelet:

HTML:

"html

"Sass:" css $ lysgrå: # D4D4D4 .grey-wrapper bakgrunnsfarge: $ lysegrå + clearfix .logos float: høyre + bakgrunnsbilde (url ("[email protected]"), url ("thoughtbot.png")) Bakgrunnsposisjon: Midt øverst, Øverst til venstre Bakgrunn-Gjenta: Gjenta-Y, Gjenta-x Høyde: 220px Bredde: 50% // SCSS-syntaks // .Grå-wrapper @include Clearfix; bakgrunnsfarge: $ lysegrå; .logos float: right; @include bakgrunnsbilde (url ("[email protected]"), url ("thoughtbot.png")); Bakgrunnsposisjon: Midt øverst, øverst til venstre; Bakgrunn-gjenta: Gjenta-Y, Gjenta-x; høyde: 220px; bredde: 50%; // "! [fil] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633234957.jpg) I eksemplet ovenfor ekspanderer den grå beholderen for å holde den floated logoer i den. Men når clearfix ikke brukes:! [fil] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633341703.jpg) Hvis du tar en titt på kildekoden blir det klart hvordan dette * micro clearfix * virker: Sass: [Bourbon kildekode] (https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_clearfix .scss) "css @mixin clearfix &: after content:" "; display: table; klar: begge; "Denne blandingen bruker :etter pseudoelement for å plassere en tom streng i enden av beholderen. På den måten etterligner det innhold etter logoen og triks nettleseren til å utvide den grå beholderen for å omgir andre elementer inni. ## Button Mixin Trenger høy kvalitet knapper ut av boksen? ### Standard Button! [Fil] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633769651.png) HTML: "html Super duper-knapp" Sass: "css $ lyseblå: # 2485F1 .super-duper-knapp + knapp ($ lyseblå) // SCSS-syntaks // .super-duper-knappen @include-knappen ($ lyseblå); // "Det er det ! Enkle og semantisk rene knapper. De kommer til og med med flotte, subtile hovereffekter. Og det er to alternativer: ### Pill Button! [Fil] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633844440.png) HTML: "html Super duper-knapp + css $ mørk-rosa: # 6B32D1 .super-duper-knapp + knapp (pille, $ mørk-rosa) // SCSS syntaks // .super-duper-knapp @include-knapp (pille, $ mørk- rosa); // "### Skinnende knapp! [Fil] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633895872.png) HTML:" html Super duper skinnende knapp "Sass:" css $ acceptance-green: # 43C914 .super-duper-knappen + knappen (skinnende, $ akseptegrønn) // SCSS syntaks // .super-duper-knappen @include-knappen (skinnende, $ aksept- grønn); // "** Vær oppmerksom! ** Vær oppmerksom på at teksten på knappene automatisk endrer fargen sin, avhengig av * lysheten * av grunnfargene på knappen. På den måten gir mixin bedre kontrast og lesbarhet. Awesome!! [fil] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441634000114.png) Sass: "css $ lysgrå: #DEDEDE .super-duper-knapp + knapp (skinnende, $ lysegrå) // SCSS syntaks // .super-duper-knapp @include-knappen (skinnende, $ lysegrå); // "## Size Mixin Trenger du noen gang å definere bredde og høyde i en erklæring? Med Bourbon, her er alt du trenger å gjøre: Sass: "css .small-artikkel + størrelse (300, 400) // SCSS syntaks // .small-artikkel @include size (300, 400); //" CSS output: "css .small-article width: 300px; height: 400px;" Du kan gi pikselverdier eller bare numeriske verdier. Du kan bruke auto for disse verdiene også. Hvis du gir bare en størrelse, antar Bourbon at du vil ha en firkant. Sass: "css .square + størrelse (25px) // SCSS syntaks // .square @include size (25px); //" ## HiDPI Mixin Hvis du vil generere fullstendig leverandør-forhåndsdefinerte media spørringer for å oppdage * HiDPI * ("Retina") enheter, kommer denne mixin til nytte. Begynn med å gi et mål * enhetspikselforhold * og erklæringer som endres dersom medieforespørselen kommer inn. Standardforholdet er 1,3. Sass HiDPI-mediesøk: "css .image width: 150px + hidpi (1.5) width: 200px // SCSS syntaks // .image width: 150px; + hidpi (1.5) width: 200px; //" CSS-utgang: "css .image width: 150px; @media only screen og (-webkit-min-enhet-pixel-forhold: 1,5), bare skjerm og (min-moz-enhet-pixel-forhold: 1,5) bare skjerm og (min-enhet-pixel-forhold: 1,5 / 1), bare skjerm og (min oppløsning: 144dpi), bare skjerm og (min oppløsning: 1.5dppx) width: 200px; Ganske kult! Det slims ned repeterende kode ganske mye. ## Retina Image Mixin Avhengig av * pixel tetthet * på enheten som viser designene dine, kan du gi bilder med riktig bitmapoppløsning. Denne fine mixen gir et * retina bakgrunnsbilde * eller et * ikke-retina bakgrunnsbilde * -avhengig av resultatet av mixins interne HiDPI-mediesøk, som kontrollerer enheten for dens pikseldensitet. Hvis jeg ikke tar feil, vil det som en bonus bare tjene en av bildene for å unngå å laste ned begge deler, noe som er spesielt fordelaktig for mobilnett. Hvis alt ovenfor er gobbledygook til deg, vil jeg anbefale å begynne med denne fantastiske [artikkelen] (http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/) på Smashing Magazine. Sass: "css .logo + retina-image (logo-ikon, 50px, 30px) // SCSS syntaks // .logo @include retina-image (logo-ikon, 50px, 30px); //" CSS-utgangen bidrar til å forklare dens funksjonalitet: "css .logo bakgrunnsbilde: url (logo-icon.png); @media bare skjerm og (-webkit-min-enhet-pixel-forhold: 1,3), bare skjerm og -moz-enhet-pixel-forhold: 1,3), bare skjerm og (-o-min-enhet-pixel-forhold: 1,3 / 1), bare skjerm og (min oppløsning: 125dpi), bare skjerm og : 1.3dppx) .logo bakgrunnsbilde: url (logo-icon_2x.png); bakgrunnsstørrelse: 50px 30px; "Standardverdien for en piksel for en enhet på 1,3 mål for Apple" Retina "-apparater (som har en forhold på 2) samt enheter med pikselforhold som "lav" som 1,3. Denne mixin forventer en **. Png ** som standardutvidelsen for alle bilder. Som standard forventer det også en ** _ 2x.png ** utvidelse til filnavnet på retina-bildet ditt. Du kan overskrive begge standardene ved å gi et annet retina-filnavn og en standardutvidelse, slik som: Sass: "css .logo + retina-image (logo-ikon, 50px, 30px, $ extension: jpg, $ retina-filnavn: HiDPI- logo-ikon, $ retina-suffiks: _retina) // SCSS syntaks // .logo @include retina-image (logo-ikon, 50px, 30px, $ extension: jpg, $ retina-filnavn: HiDPI-logo-ikon, $ retina-suffiks: _retina); // "CSS-utgang:" css .logo bakgrunnsbilde: url (logo-icon.jpg); @media-skjerm og (-webkit-min-enhet-pixel-forhold : 1,3), bare skjerm og (min-moz-enhet-pixel-forhold: 1,3), bare skjerm og (-o-min-enhet-pixel-forhold: 1,3 / 1), bare skjerm og 125dpi), bare skjerm og (min oppløsning: 1.3dppx) .logo bakgrunnsbilde: url (HiDPI-logo-icon_retina.jpg); bakgrunnsstørrelse: 50px 30px; "## Skål! Det er alt vi vil dekke når det gjelder Bourbon mixins. I neste opplæring tar vi en titt på Bourbons funksjoner.