Share
Sass er designet for å hjelpe CSS raskere; mixins er av funksjonene som gjør det mulig. Flere tyngvevektbibliotek finnes med komplekse formler for enhver situasjon, men i dag skal jeg vise hvordan du kan røre opp dine egne mixiner som utfyller eksisterende arbeidsflyter.
thumbnail: håndblande egg på PhotoDune.
Merk: De fullførte dokumentfilene kan lastes ned forut for å se hva vi skal skape, og få en ide om hvilke rå Sass-filer som ser ut.
Jeg har brukt Sass i frontend-utviklingen i mer enn et år, og mixins var funksjonen jeg låste på med en gang. Jeg så en umiddelbar reduksjon i tiden jeg brukte stilark, uansett hvor stor eller liten prosjektet var. Men hva er mixins? Fra Sass Language nettsiden:
Mixins er en av de kraftigste Sass-funksjonene. De tillater gjenbruk av stilegenskaper eller til og med selektorer uten å måtte kopiere og lime dem eller flytte dem til en ikke-semantisk klasse.
Sett en annen måte, mixins er kodegeneratorer. Du lager en mixin i Sass-stilarket med @mixin Direktivet, definer CSS-reglene det skal utgjøre og ring det når som helst du trenger de reglene som er inkludert i en stildeklarasjon. Jeg bruker mixins eksklusivt for CSS3-funksjoner som bokseskygger, tekstskygger og grense-radius. Mange av disse funksjonene støttes ikke fullt ut, og krever et leverandør prefiks som -webkit-, -moz-, -ms-, -o- å jobbe som forventet. Istedenfor å skrive fem regler hver gang jeg vil bruke en CSS3-funksjon, kan jeg ringe en one-line mixin og få den til å generere riktig CSS for meg.
Disse første to trinnene krever at vi åpner Terminal-appen (Kommandoprompt i Windows) for å verifisere Ruby-språket, og å installere Sass-perlen. Se etter terminalen på følgende steder:
Når du har terminalen åpen, skriv inn følgende kommando for å se etter en Ruby-installasjon. Ikke skriv dollarskiltet - det er din plassholder.
$ som rubin
Du bør se litt informasjon om banen / Usr / local / bin eller en feilmelding hvis Ruby ikke er installert. Her er utgangen fra OS X Terminal:
Hvis du får en feil, eller er kjent med at Ruby ikke er installert på maskinen din, er det noen ressurser for å komme seg opp med minimal innsats. Prosessen for å installere Ruby er utenfor rammen av denne artikkelen og er godt dokumentert på nettstedene nedenfor.
Når du har verifisert eller installert Ruby-språket, er Sass et snap. Fra terminalen, skriv inn denne kommandoen: $ perle installasjon sass. Hvis brukeren ikke har de riktige tillatelsene, må du kanskje kjøre kommandoen med sudo (Superbruker Gjør) som dette: $ sudo perle installasjon sass. Om noen sekunder, bør du se utdata som ligner på skjermen nedenfor.
Mens du ikke gjør det trenge en kompilator app som LiveReload, Compass eller CodeKit for å kompilere Sass i vanilje CSS, gjør den første turen rundt blokken mye jevnere. CodeKit er bare OS X, LiveReload er primært for OS X, med en Windows beta; Kompass App fungerer på OS X, Windows og Linux. Lisenser varierer fra $ 10 USD til $ 25 USD ved skrivingstidspunktet, men er verdt det for tiden spart når du blir dypere inn i Sass utvikling.
Nå vil det være en god tid å nevne at Sass kommer i to smaker, .sass og .SCSS. Uten å gå inn i spesifikasjoner, holder jeg fast med .scss-syntaksen fordi den ligner på samme måte som vanilje-CSS og kompilerer uten hikke.
Etter at du har konfigurert kompilatoren, vil du sette opp en arbeidskatalog med HTML- og CSS-filene dine. For denne opplæringen har jeg laget et eksempel som heter Skriv din egen Sass Mixins. Nedenfor er strukturen jeg skal henvise til gjennom hele opplæringen. Hvis du ikke har lastet ned dokumentfilene ennå, vennligst gjør det, og legg til Museo Sans og Droid Serif-filene til din / fonter-katalogen. Disse skriftene er påkrevd for noen av mixinene vi skal lage senere i opplæringen.
Skriv din egen Sass Mixins index.html / css (katalog) / skrifter (katalog) / scss (katalog) | - main.scss
Siden jeg har valgt LiveReload, forteller vi det om å se etter endringer som skal kompileres til CSS. Når du slår opp LiveReload, bør du bli møtt med skjermen som vises nedenfor. Dra arbeidskatalogen til sidebaret Overvåkede mapper i LiveReload-vinduet.
Neste vil du sjekke Kompilere SASS, LESS, Stylus, CoffeeScript og andre eske. Klikk alternativer for å velge utgangsstien din neste.
Du bør se et tomt bord med utgangsstier uthevet og scss / main.scss sjekket på første linje. Klikk på Sett utmatingsmappe ... knappen her. CSS-mappen skal velges som standard. Klikk på Angi utskriftsmappe og søk.
Oppdater index.html-filen din med denne koden, og oppdater nettleseren din. Din indeks skal se ut som skjermen nedenfor.
Skriv dine egne Sass Mixins Noen tekst går her.
LiveReload tilbyr nettleserutvidelser for Firefox og Chrome, men den raskeste måten å komme seg opp, er å kopiere følgende Javascript-kode (fra LiveReload-vinduet) til index.html-filen, like over den avsluttende kropp stikkord. Når denne koden er på plass, vil LiveReload lytte etter endringer i HTML- og Sass-filene, og vil automatisk oppdatere nettleseren-ikke mer Command + R noen få minutter.
Nå som vi er i gang med housekeeping, kan vi begynne å lage mixins og la kompilatoren gjøre det harde arbeidet.
Som nevnt tidligere bruker jeg mange CSS3-funksjoner i sidelayoutene mine. Problemet med disse ledende funksjonene er at de krever mange leverandørprefikser og jeg har ikke mye tålmodighet. Hvis jeg kan skrive en mixin en gang, i stedet for fem tungt dupliserte linjer med CSS hver gang jeg vil ha avrundede hjørner, skal jeg gjøre det.
Mixins er identifisert i Sass-filer av @mixin () erklæring. Når en prosessor som LiveReload kommer over denne syntaksen, ser den etter argumenter innenfor parentesene, og CSS-lignende instruksjoner inne i de krøllete båndene. Kompilatoren vil da tolke disse instruksjonene og skrive ut rent CSS til stilarket, main.css i dette tilfellet.
Åpne din main.scss-fil og kopier følgende mixin-kode. Når du klikker lagre, bør nettleservinduet ditt med index.html automatisk lades opp og vil ha en sentrert grå div med 6px avrundede hjørner.
/ * Main.scss * / @mixin border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) -webkit-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -moz-grense-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ms-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -grense-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; #wrapper @ include border-radius (6px, 6px, 6px, 6px); bredde: 750px; høyde: 250px; bakgrunn: #eee; margin: 0 auto;
Så vi har en god start med vår første mixin. Men grense-radius mixin har et svakt punkt: Hvis vi bruker en kant med en opasitet mindre enn 100%, vil bakgrunnen vise seg. Ikke akkurat et flott designvalg i mange tilfeller.
Heldigvis har vi en enkel løsning i egenskapen bakgrunnsbilder. Hvis du ikke er kjent, har Chris Coyier av CSS-Tricks en flott skriving på eiendommen.
Sass mixins kan også utvides med andre mixins. Dette tillater oss å skrive bakgrunnsbilder separat, og opprette en tredje mixin som kaller den og våre radiusradiusregler fra forrige trinn. Legg til følgende kode i din main.scss-fil og lagre. Etter å ha forfrisket nettleseren din, bør du se en blå bakgrunnsramme og en halv gjennomsiktig lysere blå radiusgrense.
/ * Main.scss * / @mixin border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) -webkit-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -moz-grense-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ms-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -grense-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; @mixin bakgrunnsbilder bakgrunnsbilde: polstring-boks; @mixin kombinert radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) @include bakgrunnsbilder; @include border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft); kropp bakgrunn: lyseblå; #wrapper bredde: 750px; høyde: 250px; bakgrunn: #eee; margin: 0 auto; border: 15px solid rgba (255, 255, 255, 0.3); @include kombinert radius (6px, 6px, 6px, 6px);
Selv om vi først dupliserte en rekke linjer, har vi nå en gjenbrukbar mixin som kan kalles når som helst ved å gi grensene-radiusverdiene. Og det vil gjengis ordentlig.
Tekstskygger er en fin måte å slå typografiske behandlinger og knapper på. Jeg bruker dem ofte for utvalgte navigasjonstilstander, faner eller etiketter. De er også en av de mest irriterende elementene, fordi IE9 ikke støtter dem, og det er ingen gode rene CSS-løsninger.
Til tross for dette uheldig faktum, inkluderer jeg mixin kode for de andre moderne nettleserne og IE 10 beta. Jeg har også kommet over et jQuery-skript for tekstskygging i IE9 eller lavere.
For moderne nettlesere er tekstskyggeegenskapen strukturert som bokseskyggen, med en horisontal og vertikal forskyvning, uskarphet og fargeparametere. Legg til følgende kode i dine main.scss- og index.html-filer, og du bør se en 3px sløret skygge bak blå tekst.
/ * Main.scss * / @mixin tekstskygge ($ horizOffset, $ vertOffset, $ uskarphet, $ farge) -webkit-text-skygge: $ horizOffset $ vertOffset $ blur $ color; -moz-text-skygge: $ horizOffset $ vertOffset $ blur $ color; -ms-tekst-skygge: $ horizOffset $ vertOffset $ uskarphet $ color; / * IE 10+ * / -o-tekst-skygge: $ horizOffset $ vertOffset $ uskarphet $ color; tekstskygge: $ horizOffset $ vertOffset $ uskarphet $ color; #wrapper, # wrapper-text-shadow bredde: 750px; høyde: 250px; bakgrunn: #eee; margin: 0 auto 20px; polstring: 15px 0 0 15px; border: 15px solid rgba (255, 255, 255, 0.3); @include kombinert radius (6px, 6px, 6px, 6px); # wrapper-text-skygge> p font-size: 36px; farge: blå; @include tekstskygge (0, 3px, 3px, # 333);
Index.html, legg til like etter div # wrapper closing tag
Tekstskyggetest.
For det siste trinnet har jeg laget mixins for bokseskygger, bakgrunnsgradienter, @ font-face-deklarasjoner og forbedret typegengivelse. Disse mixinene er testet i moderne nettlesere (Firefox, Chrome, Safari, Opera, IE9) og inkluderer alle leverandørspesifikke prefikser.
Jeg vil ikke gå i detalj om hver enkelt; detaljerte kommentarer er inkludert i main.scss-filen. Mixins følger et grunnleggende format og kan bygges på etter hvert som dine krav endres. Hvis du har et CSS-behov, kan en mixin skrives for å betjene den.
Oppdater index.html og main.scss-filene med følgende kode. Etter forfriskning, bør du se et nettleservindu som inneholder en rekke bokser, som hver viser en annen mixintest.
Bare en annen tekstmate-kode Box skygge test.Input box skyggetest.Tekstskyggetest.Bakgrunnsgradienttest.@ font-face test i Museo 700 sans.Forbedre tekstlesbarhet og kerningstest.
Accentsconagua
@mixin border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) -webkit-grense-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -moz-grense-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ms-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -grense-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; @mixin bakgrunnsbilder bakgrunnsbilde: polstring-boks; @mixin kombinert radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) @include bakgrunnsbilder; @include border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft); @mixin bokseskygge ($ horizOffset, $ vertOffset, $ uskarphet, $ farge) / * Blur er en valgfri parameter, men bidrar til å myke skyggen. Ring blandingen ved å bruke pikselverdier for $ horizOffset, $ vertOffset og $ blur, og en hex-verdi for $ color. Grensesnittbruddregelen er inkludert for å gjengi skygger riktig i IE9. * / -webkit-boks-skygge: $ horizOffset $ vertOffset $ uskarphet $ color; -moz-box-shadow: $ horizOffset $ vertOffset $ uskarphet $ color; -ms-boks-skygge: $ horizOffset $ vertOffset $ uskarphet $ color; -å-boks-skygge: $ horizOffset $ vertOffset $ uskarphet $ color; boksskygge: $ horizOffset $ vertOffset $ uskarphet $ color; border-collapse: separate; @mixin boks-skyggeinnsats ($ horizOffset, $ vertOffset, $ uskarphet, $ farge) / * Samme parametre som @mixin bokseskygge, men skaper en indre skygge for trykk eller innfelt effekt. * / -webkit-boks-skygge: $ horizOffset $ vertOffset $ uskarphet $ fargeinnsats; -moz-box-shadow: $ horizOffset $ vertOffset $ uskarphet $ fargeinnsats; -mask-skygge: $ horizOffset $ vertOffset $ uskarphet $ fargeinnsats; -o-boks-skygge: $ horizOffset $ vertOffset $ uskarphet $ fargeinnsats; bokseskygge: $ horizOffset $ vertOffset $ uskarphet $ fargeinnsats; @mixin bakgrunnsgradient ($ retning, $ førstefarge, $ andrefarge) bakgrunn: $ førstefarge; bakgrunnsbilde: -webkit-lineær-gradient ($ retning, $ førstefarge, $ andrefarge); bakgrunnsbilde: -moz-lineær-gradient ($ retning, $ førstefarge, $ andrefarge); bakgrunnsbilde: -ms-lineær-gradient ($ retning, $ førstefarge, $ andrefarge); bakgrunnsbilde: -o-lineær-gradient ($ retning, $ førstefarge, $ andrefarge); bakgrunnsbilde: lineær gradient ($ retning, $ første farge, $ andrefarge); @include bakgrunnsbilder; @mixin typografi ($ font-navn, $ font-longname) / * Pass på å lage en / fonts katalog på samme nivå som din / css katalog for å sikre at URL-strenger nedenfor fungerer som de skal. Webfonter vil inneholde det korte navnet som refereres i skriftfamilieerklæringer, og det lange navnet som trengs for URL-referanser. Mixin må påberopes med @include-deklarasjonen umiddelbart under for å laste fonter riktig. * / @ font-face font-family: $ font-name; src: url ("... / fonts /" + $ font-longname + ".eot"); src: local ('☺'), url ("... / fonter /" + $ font-longname + ".woff") format ("woff"), url ("... / fonter /" + $ font-longname + " .ttf ") format ('truetype'), url (" ... / fonts / "+ $ font-longname +" .svg # webfontjVVPrHqE ") format ('svg'); font-weight: normal; font-style: normal; @include typografi ("Museo700", "Museo700-Regular-webfont"); @include typografi ("DroidSerifRegular", "DroidSerif-Regular-webfont"); @mixin forbedre lesbarhet / * Den forbedrede lesbarhetsblandingen anbefales for overskrifter og mindre mengder tekst på grunn av den mer ressursintensive fontgengivelsen. Det anbefales ikke for mobile enheter. For mer informasjon, se MDN-artikkelen (https://developer.mozilla.org/en-US/docs/CSS/text-rendering), eller Gigaom (http://gigaom.com/2010/08/12/ optimizelegibility-for-clearer-tekst-i-nettleseren din /). Undersøk i Chrome eller Safari, og veksle og slå av tekstgjenvinningsregelen: OptimizeLegibility Rule for å se effekten på kerning. Det vil også aktivere ligaturer på fonter som støtter utvidede sett. * / tekstgengivelse: optimalisereLeglighet; @include tekstskygge (0, 0, 1px, gjennomsiktig); kropp bakgrunn: lyseblå; font-familie: Helvetica, Arial, sans-serif; font-weight: normal; #wrapper, # wrapper-insert-shadow, # wrapper-text-skygge, # wrapper-background-gradient, # wrapper-font-familie, # wrapper-improve-readability width: 750px; høyde: 250px; bakgrunn: #eee; margin: 0 auto 20px; polstring: 15px 0 0 15px; border: 15px solid rgba (255, 255, 255, 0.3); @include kombinert radius (6px, 6px, 6px, 6px); #wrapper @ include box-shadow (0, 3px, 3px, # 333); # wrapper-insert-shadow @ include box-shadow-insert (0, 3px, 3px, # 333); # wrapper-text-skygge @ include text-shadow (0, 3px, 3px, # 333); skriftstørrelse: 36px; farge: blå; # wrapper-background-gradient @ include background-gradient (topp, # 999, #fff); # wrapper-font-familie font-family: "Museo700", Helvetica, Arial; # wrapper-improve-readability> h1 font-family: "DroidSerifRegular", Georgia, "Times New Roman", serif; font-weight: normal; skriftstørrelse: 48px; @include bedre lesbarhet 
Sass mixins er en fin måte å komme raskt opp med CSS3. Enten du er omdirigering i kode eller bygge et helt nettsted fra bunnen av, vil mixins forbedre arbeidsflyten din ved å redusere linjer skrevet og tid brukt til å gjennomgå syntaks.
Fordi disse funksjonene er CSS3-sentriske, bør du ha en reserveplan for eldre browsere. For noen områder er avrundede hjørner og skygger ikke kritiske, og det er helt akseptabelt å vise en forringet visuell layout. For andre kan en polyfil som Modernizr gi funksjonsspesifikke klasser for å skrive nedback-CSS-regler.
Jeg håper du likte denne opplæringen, takk for å lese!
