Share
Sass är utformad för att hjälpa till att skriva CSS snabbare; mixins är av de funktioner som gör det möjligt. Flera tungviktsbibliotek finns med komplexa formler för varje situation, men idag ska jag visa hur man ringer upp egna mixiner som kompletterar befintliga arbetsflöden.
Miniatyr: handblanda ägg på PhotoDune.
Notera: De färdiga dokumentfilerna kan laddas ner förut för att se vad vi ska skapa och få en uppfattning om vilka råa Sass-filer som ser ut.
Jag har använt Sass i min front-end-utveckling i mer än ett år, och mixins var funktionen som jag låsade på direkt. Jag såg en omedelbar minskning av tiden jag brukade skriva stilark, oavsett hur stor eller liten projektet är. Men vad är mixins? Från Sass Language hemsida:
Mixins är en av de mest kraftfulla Sass-funktionerna. De tillåter återanvändning av stilegenskaper eller till och med väljare - utan att behöva kopiera och klistra in dem eller flytta dem till en icke-semantisk klass.
Sätt på ett annat sätt, mixins är kodgeneratorer. Du skapar en mixin i ditt Sass-stilark med @blanda i direktivet, definiera de CSS-regler som det ska ge ut och kalla det när som helst du behöver de regler som ingår i en stildeklaration. Jag använder mixins uteslutande för CSS3-funktioner som boxskuggor, textskuggor och gränsvärden. Många av dessa funktioner stöds inte fullt och kräver ett säljarprefix som -webkit-, -moz-, -ms-, -o- att arbeta som förväntat. Istället för att skriva fem regler varje gång jag vill använda en CSS3-funktion, kan jag ringa en one-line mixin och få den att generera korrekt CSS för mig.
Dessa två steg kräver att vi öppnar Terminal app (Command Prompt i Windows) för att verifiera Ruby-språket och installera Sass-pärlan. Leta efter terminalen på följande platser:
När du har terminalen öppen skriver du följande kommando för att söka efter en Ruby-installation. Skriv inte dollarnsignalen - det är din platshållare.
$ vilken rubin
Du borde se någon väginformation som / Usr / local / bin eller ett felmeddelande om Ruby inte är installerat. Här är utsignalen från min OS X-terminal:
Om du får ett fel, eller råkar veta att Ruby inte är installerat på din maskin, här är några resurser för att komma igång med minimal ansträngning. Processen för installation av Ruby ligger utanför ramen för denna artikel och är väl dokumenterad på sidorna nedan.
När du har verifierat eller installerat Ruby-språket är Sass en snap. Ange det här kommandot från terminalen: $ gem installation sass. Om din användare inte har rätt behörigheter måste du kanske köra kommandot med sudo (Super användare gör) så här: $ sudo pärla installera sass. På några sekunder bör du se utdata som liknar skärmen nedan.
Medan du inte gör det behöver en kompilator app som LiveReload, Compass eller CodeKit för att kompilera Sass i vanilj CSS, det gör den första resan runt blocket mycket mjukare. CodeKit är bara OS X, LiveReload är främst för OS X, med en Windows beta; Compass App fungerar på OS X, Windows och Linux. Licenser sträcker sig från $ 10 USD till $ 25 USD vid skrivandet, men är värda det för den sparade tiden när du blir djupare in i Sass utveckling.
Nu skulle det vara bra att nämna att Sass kommer i två smaker, .sass och .SCSS. Utan att gå in i specifika stavar jag med .scss-syntaxen för att den liknar närbilden av vanilj CSS och sammanställer utan hicka.
När du har konfigurerat din kompilator vill du skapa en arbetsmapp med dina HTML- och CSS-filer. För denna handledning har jag skapat ett prov som heter Skriv dina egna Sass Mixins. Nedan är den struktur som jag kommer att referera till under hela handledningen. Om du inte har laddat ner dokumentfilerna än, gör du så och lägg till Museo Sans and Droid Serif-filer till din / fonts katalog. Dessa teckensnitt krävs för några av mixinsna som vi ska skapa senare i handledningen.
Skriv ditt eget Sass Mixins index.html / css (katalog) / typsnitt (katalog) / scss (katalog) | - main.scss
Eftersom jag har valt LiveReload, berättar vi att den ska titta på ändringar som ska sammanställas till CSS. När du slår upp LiveReload ska du hälsas med skärmen som visas nedan. Dra din arbetsmapp i sidfältet Övervakade mappar i LiveReload-fönstret.
Nästa ska du kolla Kompilera SASS, LESS, Stylus, CoffeeScript och andra låda. Klick alternativ för att välja din produktionsväg nästa.
Du borde se ett tomt bord med utmatningsvägar markerade och scss / main.scss kontrolleras på första raden. Klicka på Ange utmatningsmapp ... knappen här. CSS-mappen ska väljas som standard. Klicka på Ange exportmapp och använd.
Uppdatera din index.html-fil med den här koden och uppdatera din webbläsare. Ditt index ska se ut som skärmen nedan.
Skriv dina egna Sass Mixins En del text går här.
LiveReload erbjuder webbläsartillägg för Firefox och Chrome, men det snabbaste sättet att komma igång är att kopiera följande JavaScript-kod (från LiveReload-fönstret) till din index.html-fil, precis ovanför stängningen kropp märka. När denna kod är på plats kommer LiveReload att lyssna på ändringar i dina HTML- och Sass-filer, och uppdaterar automatiskt webbläsaren-inte mer Command + R några minuter.
Nu när vi går igenom hushållet kan vi börja skapa mixins och låta vår kompilator göra det hårda arbetet.
Som tidigare sagt använder jag många CSS3-funktioner i mina sidlayouter. Problemet med dessa ledande funktioner är att de kräver många leverantörs prefix och jag har inte mycket tålamod. Om jag kan skriva en mixin en gång i stället för fem kraftigt dubblade linjer CSS varje gång jag vill ha avrundade hörn, ska jag göra det.
Mixins identifieras i Sass-filer av @blanda i() deklaration. När som helst en processor som LiveReload kommer på den här syntaxen, letar den efter argument inom parenteserna och CSS-liknande instruktioner inuti de lockiga axlarna. Kompilatorn kommer då att tolka dessa instruktioner och utföra ren CSS till ditt stylesheet, main.css i det här fallet.
Öppna din main.scss-fil och kopiera följande mixin-kod. När du klickar på Spara, bör ditt webbläsarfönster med index.html uppdateras automatiskt och har en centrerad grå div med 6px rundade hörn.
/ * Main.scss * / @mixin border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) -webkit-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -moz-gränsen-radien: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ms-radien: $ topLeft $ topRight $ bottomRight $ bottomLeft; -gränsradien: $ topLeft $ topRight $ bottomRight $ bottomLeft; gränslinje: $ topLeft $ topRight $ bottomRight $ bottomLeft; #wrapper @ include border-radius (6px, 6px, 6px, 6px); bredd: 750px; höjd: 250px; bakgrund: #eee; marginal: 0 auto;
Så vi har en bra start med vår första mixin. Men gränsen-radien mixin har en svag punkt: Om vi tillämpar en kant med en opacitet mindre än 100%, kommer bakgrunden att visas igenom. Inte precis ett bra designval i många fall.
Lyckligtvis har vi en enkel åtgärd i egenskapen Bakgrundsbilder. Om du inte är bekant, har Chris Coyier av CSS-Tricks en bra skrivning på fastigheten.
Sass mixins kan också utökas med andra mixins. Detta gör det möjligt för oss att skriva bakgrundsbildet separat och skapa en tredje mixin som kallar det och våra gränsstrådsregler från föregående steg. Lägg till följande kod i din main.scss-fil och spara. Efter att du har uppdaterat din webbläsare bör du se en blå bakgrund och en halv genomskinlig ljusare blå radiegräns.
/ * Main.scss * / @mixin border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) -webkit-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -moz-gränsen-radien: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ms-radien: $ topLeft $ topRight $ bottomRight $ bottomLeft; -gränsradien: $ topLeft $ topRight $ bottomRight $ bottomLeft; gränslinje: $ topLeft $ topRight $ bottomRight $ bottomLeft; @mixin bakgrundsbilder bakgrundsblock: vadderar-box; @ mix-radien ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) @ inkludera bakgrundsbilder; @ include border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft); kropp bakgrund: ljusblå; #wrapper width: 750px; höjd: 250px; bakgrund: #eee; marginal: 0 auto; gränsen: 15 px fast rgba (255, 255, 255, 0,3); @include kombinerad radius (6px, 6px, 6px, 6px);
Även om vi duplicerade ett antal linjer inledningsvis har vi nu en återanvändbar mixin som kan kallas när som helst genom att tillhandahålla gränsvärdena. Och det kommer att göra ordentligt.
Textskuggor är ett bra sätt att slå typografiska behandlingar och knappar. Jag använder dem ofta för valda navigeringslägen, flikar eller etiketter. De är också en av de mest irriterande föremålen, eftersom IE9 inte stöder dem, och det finns inga bra rena CSS-lösningar.
Trots detta olyckliga faktum, innehåller jag mixin-kod för de andra moderna webbläsarna och IE 10 beta. Jag har också stött på ett jQuery-skript för textskuggning i IE9 eller lägre.
För moderna webbläsare är textskuggegenskapen strukturerad ungefär som boxskuggan, med en horisontell och vertikal offset, oskärpa och färgparametrar. Lägg till följande kod till dina main.scss- och index.html-filer, och du bör se en 3px suddig skugga bakom blå text.
/ * Main.scss * / @mixin textskuggning ($ horizOffset, $ vertOffset, $ oskärpa, $ färg) -webkit-text-skugga: $ horizOffset $ vertOffset $ blur $ color; -moz-text-skugga: $ horizOffset $ vertOffset $ blur $ color; -ms-text-skugga: $ horizOffset $ vertOffset $ blur $ color; / * IE 10+ * / -o-text-skugga: $ horizOffset $ vertOffset $ blur $ color; textskugga: $ horizOffset $ vertOffset $ blur $ color; #wrapper, # wrapper-text-shadow width: 750px; höjd: 250px; bakgrund: #eee; marginal: 0 auto 20px; vaddering: 15px 0 0 15px; gränsen: 15 px fast rgba (255, 255, 255, 0,3); @include kombinerad radius (6px, 6px, 6px, 6px); # wrapper-text-skugga> p font-size: 36px; färgen blå; @ inkludera textskuggning (0, 3px, 3px, # 333);
Index.html, lägg till efter div # wrapper closing tagg
Textskuggprov.
För det sista steget har jag skapat mixins för boxskuggor, bakgrundsgradienter, @ font-face-deklarationer och förbättrad typgodkännande. Dessa mixins har testats i moderna webbläsare (Firefox, Chrome, Safari, Opera, IE9) och inkluderar alla leverantörsspecifika prefix.
Jag kommer inte att gå in i detalj om var och en; detaljerade kommentarer ingår i huvud.scss-filen. Mixins följer ett grundläggande format och kan byggas på när dina krav ändras. Om du har ett CSS-behov kan en mixin skrivas för att servera den.
Uppdatera dina index.html och main.scss-filer med följande kod. Efter uppfriskning borde du se ett webbläsarfönster som innehåller ett antal lådor, var och en visar ett annat mixintest.
Bara en annan textmate snippet Box skuggprov.Input box skuggprov.Textskuggprov.Bakgrundsgradienttest.@ font-face test i Museo 700 sans.Förbättra läsbarhet och testning av text.
Accentsconagua
@mixin border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) -webkit-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -moz-gränsen-radien: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ms-radien: $ topLeft $ topRight $ bottomRight $ bottomLeft; -gränsradien: $ topLeft $ topRight $ bottomRight $ bottomLeft; gränslinje: $ topLeft $ topRight $ bottomRight $ bottomLeft; @mixin bakgrundsbilder bakgrundsblock: vadderar-box; @ mix-radien ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) @ inkludera bakgrundsbilder; @ include border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft); @mixin box-skugga ($ horizOffset, $ vertOffset, $ oskärpa, $ färg) / * Oskärpa är en valfri parameter, men hjälper till att mjuka skuggan. Ring blandningen genom att tillämpa pixelvärden för $ horizOffset, $ vertOffset och $ blur och ett hex värde för $ color. Regelgränssnittet ingår för att göra skuggor korrekt i IE9. * / -webkit-box-skugga: $ horizOffset $ vertOffset $ blur $ color; -moz-box-skugga: $ horizOffset $ vertOffset $ blur $ color; -ms-box-skugga: $ horizOffset $ vertOffset $ blur $ color; -å-box-skugga: $ horizOffset $ vertOffset $ blur $ color; boxskugga: $ horizOffset $ vertOffset $ blur $ color; gränsöverskridande: separata @mixin box-shadow-inset ($ horizOffset, $ vertOffset, $ oskärpa, $ färg) / * Samma parametrar som @mixin boxskugga, men skapar en inre skugga för pressade eller försänkta effekter. * / -webkit-box-skugga: $ horizOffset $ vertOffset $ oskärpa $ färginsats; -moz-box-skugga: $ horizOffset $ vertOffset $ oskärpa $ färginsats; -ms-box-skugga: $ horizOffset $ vertOffset $ blur $ färginsats; -o-box-skugga: $ horizOffset $ vertOffset $ blur $ färginmatning; boxskugga: $ horizOffset $ vertOffset $ oskärpa $ färginsats; @mixin bakgrundsgradient ($ riktning, $ förstafärg, $ andrafärg) bakgrund: $ förstafärg; bakgrundsbild: -webkit-linjär-gradient ($ riktning, $ förstafärg, $ andrafärg); bakgrundsbild: -moz-linjär-gradient ($ riktning, $ förstafärg, $ andrafärg); bakgrundsbild: -ms-linjär-gradient ($ riktning, $ förstafärg, $ andrafärg); bakgrundsbild: -o-linjär-gradient ($ riktning, $ förstafärg, $ andrafärg); Bakgrundsbild: Linjär-gradient ($ riktning, $ förstafärg, $ andrafärg); @ inkludera bakgrundsbilder @mixin typografi ($ font-name, $ font-longname) / * Se till att skapa en / fonts katalog på samma nivå som din / css katalog för att se till att webbadresserna nedan fungerar som de ska. Webfonter kommer att innehålla det korta namnet som referens i font-familjedeklarationer och det långa namnet som behövs för URL-referenser. Mixin kommer att behöva åberopas med @include-deklarationen direkt nedan för att ladda teckensnitt korrekt. * / @ font-face font-family: $ font-name; src: url ("... / fonts /" + $ font-longname + ".eot"); src: local ('☺'), url ("... / fonts /" + $ font-longname + ".woff") format ("woff"), url ("... / fonts /" + $ font-longname + .ttf ") format (" truetype "), url (" ... / fonts / "+ $ font-longname +" .svg # webfontjVVPrHqE ") format ('svg'); typsnitt: normal; typsnittstyp: normal; @ inkludera typografi ("Museo700", "Museo700-Regular-webfont"); @include typografi ("DroidSerifRegular", "DroidSerif-Regular-webfont"); @mixin förbättras läsbarhet / * Förbättringsläsbarhet rekommenderas för rubriker och mindre mängder text på grund av den mer resurskrävande typsnittet. Det rekommenderas inte för mobila enheter. Mer information finns i MDN-artikeln (https://developer.mozilla.org/en-US/docs/CSS/text -rendering), eller Gigaom (http://gigaom.com/2010/08/12/12/ optimizelegibility-for-clearer-text-i-din-webbläsare /). Inspektera i Chrome eller Safari och vrid på och avaktivera textreferensen: OptimizeLegibility-regeln för att se effekten på kerning. Det kommer också att aktivera ligaturer på teckensnitt som stöder utökade uppsättningar. * / text-rendering: optimizeLegibility; @ inkludera textskuggning (0, 0, 1px, transparent); kropp bakgrund: ljusblå; fontfamilj: Helvetica, Arial, sans-serif; typsnitt: normal; #wrapper, # wrapper-inset-shadow, # wrapper-text-skugga, # wrapper-background-gradient, # wrapper-font-family, # wrapper-improve-läsbarhet width: 750px; höjd: 250px; bakgrund: #eee; marginal: 0 auto 20px; vaddering: 15px 0 0 15px; gränsen: 15 px fast rgba (255, 255, 255, 0,3); @include kombinerad radius (6px, 6px, 6px, 6px); #wrapper @ include box-shadow (0, 3px, 3px, # 333); # wrapper-inset-shadow @ include box-shadow-insert (0, 3px, 3px, # 333); # wrapper-text-skugga @ include text-shadow (0, 3px, 3px, # 333); typsnittstorlek: 36px; färgen blå; # wrapper-background-gradient @ include background-gradient (topp, # 999, #fff); # wrapper-font-family font-family: "Museo700", Helvetica, Arial; # wrapper-improve-readability> h1 font-family: "DroidSerifRegular", Georgia, "Times New Roman", serif; typsnitt: normal; typsnittstorlek: 48px; @ inkludera förbättrad läsbarhet 
Sass mixins är ett bra sätt att snabbt komma igång med CSS3. Oavsett om du driver i kod eller bygger en hel webbplats från början, kommer mixins att förbättra ditt arbetsflöde genom att minska linjerna skrivna och använda tid på att granska syntaxen.
Eftersom dessa funktioner är CSS3-centrerade bör du ha en reservplan för äldre browsers. För vissa platser är avrundade hörn och skuggor inte kritiska, och det är helt acceptabelt att visa en försämrad visuell layout. För andra kan en polyfil som Modernizr erbjuda funktionsspecifika klasser för att skriva fallback CSS-regler.
Jag hoppas att du gillade den här handledningen, tack för att du läste!
