En för vägen Mer Tasty Bourbon Mixins

Denna artikel är den andra delen av min undersökning i mixins från Bourbon Sass-biblioteket. Bland dem hittar du användbara exempel som kommer att påskynda ditt arbetsflöde och minimera din Sass-kod.

En annan lista med godsaker

Vi kommer att få en smak av följande åtta mixins:

• Inline Block mixin
• Ställ mixin
• Triangle mixin
• Clearfix mixin
• Knapp mixin
• Storlek mixin
• HiDPI media query mixin
• Retina Image mixin

Precis som i föregående handledning representerar exemplen nedan inte nödvändigtvis bästa designpraxis, men väljs för att utforska de grundläggande funktionaliteten för dessa mixins.

Inline Block Mixin

Avsnitten visas som standard som blockera element.

HTML:

"html

Yada yada yada

Yada yada yada

"

Blockelement, till exempel avsnitt, skapar automatiskt en ny rad i layouten.

Denna mixin kommer till nytta om du vill byta standard visningsbeteende av element till inline-blocket. Det anger inte bara display: inline-block men tar också hand om quirks och arv stöd för IE7.

Läs mer om visning på designshack.net.

Sass: Dessa block har floatliknande beteende, genom inline-block.

"css .paragraphs-behaviour-like-blocks + inline-block bakgrundsfärg: tomat

// SCSS-syntax // .paragraphs-behaviour-like-blocks @ include inline-block; // "

Ta en titt på den genererade CSS-utgången. Vem vill hantera otäcka saker som det ändå?

CSS-utgång:

css .paragraphs-behaviour-like-blocks display: inline-block; vertikaljustering: baslinje; zoom: 1; * display: inline; * vertikaljustering: auto; bakgrundsfärg: tomat;

Satt till display: inline-block, Punkterna visas inline, men behåller deras blocknivå egenskaper.

Uppmärksamhet! Lägg märke till mellanrummet mellan blockelementen. Om du använde flyta för att uppnå samma layout, skulle du inte se någon blankutrymme. Det är en typ av standard whitespace, som finns i HTML, som inte går bort genom att ställa in marginaler till 0px. Istället måste du ta bort eventuella teckenfel i själva uppteckningen, vilket visas i denna penna:

Ställ Mixin

Denna mixin är en stenografi för att skriva något som följande:

sass:

css .some-element position: relativ topp: 0px vänster: 100px

sass:

"css .some-element + position (relativ, 0px 0 0 100px) // höger längst ner till vänster

// SCSS-syntaxen.some-element // @ include position (relativ, 0px 0 0 100px); "

Det är allt. Ingen magi, men fortfarande super användbar. Att hålla stilarken enkla och läsbara lönar sig över tiden.

Triangle Mixin

Vill du använda CSS-trianglar utan att fitta runt? Det finns absolut ingen anledning att använda bilder för jobbet. Det är lätt som paj med denna mixin.

sass:

"css .triangle + triangeln (25px, tomat, ner) // storlek, färg, riktning

// SCSS syntax. Triangel @include triangel (25px, tomat, ned); // "

Den tredje parametern definierar riktningen. Alternativ för denna mixin inkluderar:

• ner
• upp
• vänster

• höger

• upprätt
• upp till vänster
• fullkomligt
• ner vänster

Du kan även definiera en andra färg om du behöver en bakgrundsfärg för din triangel.

Clearfix Mixin

Behållare som har flytande element inuti dem upplever problem med nollhöjdbehållare-i huvudsak håller behållarelementet ut i nollpunkten om alla dess element är invändigt och tas ut ur behållarens strömma. I huvudsak finns det inget kvar att fylla behållaren.

De clearfix mixin tar hand om detta när det appliceras på behållaren / omslaget. Det bästa med detta är att det inte kräver extra "tom" markering för att passa clearfixen. Det håller saker semantiska, separerar bekymmer, genom att bara lägga till clearfix i dina stylesheets. Ta en titt på detta mycket enkla exempel:

HTML:

"html

"Sass:" css $ ljusgrå: # D4D4D4 .grå-wrapper bakgrundsfärg: $ ljusgrå + clearfix .logos float: höger + bakgrunds-bild (url ("[email protected]"), url ("thoughtbot.png")) Bakgrundsposition: Centrertopp, Överst till vänster Bakgrundsrepetition: Upprepa-Y, Upprepa-x Höjd: 220px Bredd: 50% // SCSS-syntax // .Grey-wrapper @include Clearfix; bakgrundsfärg: $ ljusgrå; .logos float: right; @ inkludera bakgrundsbild (url ("[email protected]"), url ("thoughtbot.png")); Bakgrundsposition: Mitt topp, vänster till vänster; bakgrundsrepetition: repetera-y, repetera-x; höjd: 220px; bredd: 50%; // "! [fil] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633234957.jpg) I exemplet ovan expanderar den grå behållaren för att hålla den floated logos inom den. Men när clearfix inte används:! [file] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633341703.jpg) Om du tar en titt på källkoden blir det klart hur detta * micro clearfix * fungerar: Sass: [Bourbon källkod] (https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_clearfix .scss) "css @mixin clearfix &: efter innehåll:" "; display: tabell; tydligt: ​​båda; "Denna mixin använder :efter pseudoelement för att placera en tom sträng i behållarens enda ände. Därigenom efterliknar det innehållet efter logotypen och trickar webbläsaren i att expandera den grå behållaren för att omge andra element inuti. ## Button Mixin Behöver du högkvalitativa knappar ur lådan? ### Standardknapp! [Fil] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633769651.png) HTML: "html Super duper-knapp" Sass: "css $ ljusblå: # 2485F1 .super-duper-knapp + knapp ($ ljusblå) // SCSS-syntax // .super-duper-knappen @include-knappen ($ ljusblå); // "Det är det ! Enkla och semantiskt rena knappar. De kommer även med snygga, subtila svängareffekter. Och det finns ytterligare två alternativ: ### Pill Button! [Fil] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633844440.png) HTML: "html Super duper-knappen + css $ mörkrosa: # 6B32D1 .super-duper-knappen + knappen (piller, $ mörk-rosa) // SCSS-syntax // .super-duper-knappen @include-knappen rosa); // "### Glänsande knapp! [Fil] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441633895872.png) HTML:" html Super duper glänsande knapp "Sass:" css $ accept-green: # 43C914 .super-duper-knappen + knappen (glänsande, $ accept-green) // SCSS-syntax // .super-duper-knappen @include-knappen (glänsande, $ accept- grön); // ** "Observera! ** Observera att texten på knapparna automatiskt ändrar sin färg beroende på * ljusstyrkan * på knappens basfärg. På så sätt ger mixin bättre kontrast och läsbarhet. Awesome!! [fil] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F851%2Fposts%2F24794%2Fimage-1441634000114.png) Sass: "css $ ljusgrå: #DEDEDE .super-duper-knappen + knapp (glänsande, $ ljusgrå) // SCSS-syntax // .super-duper-knappen @include-knappen (glänsande, $ ljusgrå); // "## Size Mixin behöver du någonsin definiera bredd och höjd i en deklaration? Med Bourbon, här är allt du behöver göra: Sass: "css .small-artikel + storlek (300, 400) // SCSS-syntax // .small-artikel @include size (300, 400); //" CSS output: "css .small-article width: 300px; height: 400px;" Du kan ge pixelvärden eller bara numeriska värden. Du kan använda bil för dessa värden också. Om du endast ger en storlek antar Bourbon att du vill ha en fyrkant. Sass: "css .square + storlek (25px) // SCSS-syntax // .square @include size (25px); //" ## HiDPI Mixin Om du vill snabbt generera fullständiga leverantörer med förfrågade mediafrågor för att upptäcka * HiDPI * ("Retina") enheter, kommer denna mixin till nytta. Börja med att tillhandahålla ett mål * enhetspixelförhållande * och deklarationer som ändras om mediasökningen sparkar in. Standardförhållandet är 1,3. Sass HiDPI-media-fråga: "css. Bildbredd: 150px + hidpi (1.5) bredd: 200px // SCSS-syntax // .image width: 150px; + hidpi (1.5) width: 200px; //" CSS-utgång: "css .image width: 150px; @media only screen och (-webkit-min-enhet-pixel-förhållande: 1,5), endast skärm och (min-moz-enhet-pixel-förhållande: 1,5) Endast skärm och (-o-min-enhet-pixel-förhållande: 1,5 / 1), endast skärm och (min upplösning: 144dpi), endast skärm och (min upplösning: 1.5dppx) width: 200px; Ganska cool! Det slims ner repeterande kod ganska lite. ## Retina Image Mixin Beroende på * pixeldensitet * på enheten som visar dina mönster, kan du tillhandahålla bilder med lämplig bitmappsupplösning. Denna fina mixin ger en * näthinnans bakgrundsbild * eller en * näthinnans bakgrundsbild * -dependent på resultatet av mixins interna HiDPI-mediasökning, som kontrollerar enheten för dess pixeldensitet. Om jag inte misstänker, tjänar det bara en av bilderna för att undvika att ladda ner båda, vilket är särskilt fördelaktigt för mobilnät. Om allt ovan är gobbledygook till dig, skulle jag rekommendera att börja med denna fantastiska [artikel] (http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/) på Smashing Magazine. Sass: "css .logo + retina-image (logo-ikon, 50px, 30px) // SCSS-syntax // .logo @include retina-image (logo-ikon, 50px, 30px); //" CSS-utgången hjälper till att förklara dess funktionalitet: "css .logo background-image: url (logo-icon.png); @media bara skärm och (-webkit-min-enhet-pixel-förhållande: 1,3), bara skärm och -moz-enhet-pixel-förhållande: 1,3), endast skärm och (-o-min-enhet-pixel-förhållande: 1,3 / 1), endast skärm och (min upplösning: 125dpi), endast skärm och : 1.3dppx) .logo bakgrunds-bild: url (logo-icon_2x.png); bakgrundsstorlek: 50px 30px; "Standardinställningen för en pixel för en enhet på 1,3 riktar sig till Apple" Retina " förhållandet 2) samt enheter med pixelförhållanden som "låg" som 1,3. Denna mixin förväntar sig en **. Png ** som standardförlängning för alla bilder. Som standard förväntar man sig också en ** _ 2x.png ** förlängning till filnamnet på din näthinnans bild. Du kan skriva över båda standardvärdena genom att ge ett annat retina-filnamn och en standardförlängning, som så: Sass: "css .logo + retina-image (logotyp-ikon, 50px, 30px, $ extension: jpg, $ retina-filnamn: HiDPI- logo-ikon, $ retina-suffix: _retina) // SCSS-syntax // .logo @include retina-image (logo-ikon, 50px, 30px, $ extension: jpg, $ retina-filnamn: HiDPI-logo-ikon, $ retina-suffix: _retina); // "CSS-utgång:" css .logo bakgrunds-bild: url (logo-icon.jpg); @media bara skärm och (-webkit-min-enhet-pixel-förhållande : 1,3), endast skärm och (min-moz-enhet-pixel-förhållande: 1,3), endast skärm och (-o-min-enhet-pixel-förhållande: 1,3 / 1), endast skärm och (min upplösning: 125dpi), bara skärm och (min upplösning: 1.3dppx) .logo bakgrundsbild: url (HiDPI-logo-icon_retina.jpg); bakgrundsstorlek: 50px 30px; "## Skål! Det är allt vi kommer att täcka när det gäller Bourbon mixins. I nästa handledning tar vi en titt på Bourbons funktioner.