Share
Sass is ontworpen om CSS sneller te helpen schrijven; mixins zijn van de functies die het mogelijk maken. Verschillende zwaargewicht bibliotheken bestaan met complexe formules voor elke situatie, maar vandaag laat ik zien hoe je je eigen mixins kunt aanwakkeren die een aanvulling vormen op bestaande workflows.
thumbnail: meng ei met de hand op PhotoDune.
Notitie: De voltooide documentbestanden kunnen van tevoren worden gedownload om te bekijken wat we gaan maken en een idee krijgen van hoe onbewerkte Sass-bestanden eruit zien.
Ik gebruik Sass al meer dan een jaar in mijn frontend-ontwikkeling en mixins waren de functie die ik meteen heb ingebouwd. Ik zag meteen de tijd die ik aan het schrijven van stylesheets besteedde, hoe groot of klein het project ook was. Maar wat zijn mixins? Van de Sass Language-website:
Mixins zijn een van de krachtigste Sass-functies. Ze staan hergebruik van stijlen-eigenschappen of zelfs selectors toe-zonder ze te kopiëren en te plakken of ze naar een niet-semantische klasse te verplaatsen.
Anders gezegd, mixins zijn code generators. U maakt een mixin in uw Sass-stylesheet met de @mixin richtlijn, definieer de CSS-regels die het moet uitvoeren en noem het op elk moment dat u die regels nodig hebt die zijn opgenomen in een stijlverklaring. Ik gebruik mixins uitsluitend voor CSS3-functies, zoals doosschaduwen, tekstschaduwen en randradiussen. Veel van deze functies worden niet volledig ondersteund en vereisen een voorvoegsel van een leverancier zoals -webkit-, -moz-, -ms-, -o- werken zoals verwacht. In plaats van vijf regels te schrijven telkens als ik een CSS3-functie wil gebruiken, kan ik een mixin in één regel bellen en ervoor zorgen dat het juiste CSS voor mij genereert.
Voor deze eerste twee stappen moeten we de Terminal-app openen (opdrachtprompt in Windows) om de Ruby-taal te verifiëren en om de Sass-edelsteen te installeren. Zoek naar de Terminal op de volgende plaatsen:
Zodra u de terminal open hebt, typt u de volgende opdracht om te controleren op een Ruby-installatie. Voer geen dollarteken in - dit is uw tijdelijke aanduiding.
$ welke robijn
Je zou een aantal pad-informatie moeten zien zoals / Usr / local / bin of een foutmelding als Ruby niet is geïnstalleerd. Hier is de uitvoer van mijn OS X Terminal:
Als u een foutmelding ontvangt of als u weet dat Ruby niet op uw computer is geïnstalleerd, volgen hier enkele bronnen om met minimale inspanning aan de slag te gaan. Het proces voor het installeren van Ruby valt buiten het bestek van dit artikel en is goed gedocumenteerd op de onderstaande sites.
Zodra je de Ruby-taal hebt gecontroleerd of geïnstalleerd, is Sass een eitje. Voer vanuit de Terminal deze opdracht in: $ gem installeer sass. Als uw gebruiker niet over de juiste machtigingen beschikt, moet u de opdracht mogelijk uitvoeren met sudo (Super User Do) zoals dit: $ sudo gem install sass. In een paar seconden ziet u een vergelijkbare uitvoer als het onderstaande scherm.
Terwijl je dat niet doet nodig hebben een compiler-app als LiveReload, Compass of CodeKit om Sass in vanilla CSS te compileren, het maakt die eerste rit rond het blok een stuk vloeiender. CodeKit is alleen OS X, LiveReload is voornamelijk bedoeld voor OS X, met een Windows-bèta; Compass-app werkt op OS X, Windows en Linux. Licenties lopen uiteen van $ 10 USD tot $ 25 USD op het moment van schrijven, maar zijn het waard voor de tijd die u bespaart als u dieper ingaat op de ontwikkeling van Sass.
Het zou een goed moment zijn om te vermelden dat Sass in twee smaken verkrijgbaar is, .sass en .SCSS. Zonder op details in te gaan, blijf ik bij de .scss-syntaxis, omdat deze sterk lijkt op vanilla CSS en compileert zonder enige hik..
Nadat je je compiler hebt ingesteld, wil je een werkdirectory instellen met je HTML- en CSS-bestanden. Voor deze zelfstudie heb ik een voorbeeld gemaakt met de naam Write Your Own Sass Mixins. Hieronder staat de structuur waarnaar ik in de tutorial verwijs. Als u de documentbestanden nog niet hebt gedownload, doet u dit en voegt u de bestanden Museo Sans en Droid Serif toe aan de map / fonts. Deze lettertypen zijn vereist voor enkele van de mixins die we later in de zelfstudie zullen maken.
Schrijf uw eigen Sass Mixins index.html / css (directory) / fonts (directory) / scss (directory) | - main.scss
Aangezien ik voor LiveReload heb gekozen, zullen we het laten weten dat er wijzigingen moeten worden gecompileerd die in CSS moeten worden gecompileerd. Wanneer je LiveReload opstart, zou je moeten worden begroet met het onderstaande scherm. Sleep uw werkmap naar de zijbalk van Monitored Folders in het LiveReload-venster.
Vervolgens wilt u de Compileer SASS, LESS, Stylus, CoffeeScript en anderen doos. Klik opties om uw uitvoerpad vervolgens te selecteren.
U zou een lege tabel moeten zien met Uitvoerpaden gemarkeerd en scss / main.scss gecontroleerd op de eerste regel. Klik op de Uitvoermap instellen ... knop hier. De CSS-map moet standaard worden geselecteerd. Klik op Outputmap instellen en toepassen.
Werk het index.html-bestand bij met deze code en vernieuw uw browser. Uw index moet er uitzien als het onderstaande scherm.
Schrijf je eigen Sass Mixins Er komt wat tekst hier.
LiveReload biedt browserextensies voor Firefox en Chrome, maar de snelste manier om aan de slag te gaan, is door het volgende Javascript-fragment (van het LiveReload-venster) naar uw index.html-bestand te kopiëren, net boven de afsluiting lichaam label. Zodra dit fragment op zijn plaats is, zal LiveReload luisteren naar wijzigingen in uw HTML- en Sass-bestanden en zal het de browser automatisch updaten-geen Command + R meer om de paar minuten.
Nu we klaar zijn met de huishouding, kunnen we beginnen met het maken van mixins en onze compiler het harde werk laten doen.
Zoals eerder vermeld, gebruik ik veel CSS3-functies in mijn paginalay-outs. Het probleem met deze geavanceerde functies is dat ze veel voorvoegsels van leveranciers vereisen en dat ik niet veel geduld heb. Als ik een mixin een keer kan schrijven, in plaats van vijf zwaar gedupliceerde CSS-regels telkens als ik afgeronde hoeken wil, ga ik het doen.
Mixins worden geïdentificeerd in Sass-bestanden door de @mixin () verklaring. Telkens wanneer een processor als LiveReload deze syntax tegenkomt, zoekt het naar argumenten binnen de haakjes en CSS-achtige instructies binnen de accolades. De compiler interpreteert dan die instructies en voert pure CSS uit naar uw stylesheet, main.css in dit geval.
Open uw main.scss-bestand en kopieer de volgende mixin-code. Wanneer u op Opslaan klikt, wordt uw browservenster met index.html automatisch opnieuw geladen en krijgt een gecentreerde grijze div met 6 px afgeronde hoeken.
/ * Main.scss * / @mixin border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) -webkit-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -moz-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ms-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -o-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; grensradius: $ topLeft $ topRight $ bottomRight $ bottomLeft; #wrapper @omvat randradius (6px, 6px, 6px, 6px); breedte: 750 px; hoogte: 250 px; achtergrond: #eee; marge: 0 auto;
Dus we gaan goed van start met onze eerste mixin. Maar de grensradius-mixin heeft een zwakke plek: als we een rand met een dekking van minder dan 100% toepassen, wordt de achtergrond weergegeven. Niet echt een geweldige ontwerpkeuze in veel gevallen.
Gelukkig hebben we een eenvoudige oplossing in de eigenschap background-clip. Als je niet bekend bent, heeft Chris Coyier van CSS-Tricks een goede beschrijving van het onroerend goed.
Sass-mixins kunnen ook met andere mixins worden uitgebreid. Dit stelt ons in staat om de achtergrondclip apart te schrijven en een derde mixin te maken die deze en onze grensradiusregels uit de vorige stap noemt. Voeg de volgende code toe aan uw main.scss-bestand en sla het op. Nadat u uw browser heeft vernieuwd, ziet u een blauwe achtergrond en een semi-transparante lichtere blauwe straalrand.
/ * Main.scss * / @mixin border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) -webkit-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -moz-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ms-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -o-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; grensradius: $ topLeft $ topRight $ bottomRight $ bottomLeft; @mixin background-clip background-clip: padding-box; @mixin combined-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) @include background-clip; @ include border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft); body achtergrond: lichtblauw; #wrapper width: 750px; hoogte: 250 px; achtergrond: #eee; marge: 0 auto; grens: 15px vaste rgba (255, 255, 255, 0,3); @omvat gecombineerde straal (6px, 6px, 6px, 6px);
Hoewel we aanvankelijk een aantal regels dupliceerden, hebben we nu een herbruikbare mixin die op elk moment kan worden opgeroepen door de grensradiuswaarden te leveren. En het zal goed renderen.
Tekstschaduwen zijn een geweldige manier om typografische behandelingen en knoppen op te vijzelen. Ik gebruik ze vaak voor geselecteerde navigatiestaten, tabbladen of labels. Ze zijn ook een van de meest irritante items, omdat IE9 ze niet ondersteunt, en er zijn geen goede pure CSS-oplossingen.
Ondanks dit ongelukkige feit, voeg ik mixin-code toe voor de andere moderne browsers en IE 10-bèta. Ik ben ook een jQuery-script tegengekomen voor tekstschaduwweergave in IE9 of lager.
Voor moderne browsers is de eigenschap text-shadow net zo gestructureerd als de doosschaduw, met een horizontale en verticale verschuiving, vervaging en kleurparameters. Voeg de volgende code toe aan uw main.scss- en index.html-bestanden en u zou een 3px vage schaduw achter blauwe tekst moeten zien.
/ * Main.scss * / @mixin text-shadow ($ horizOffset, $ vertOffset, $ blur, $ color) -webkit-text-shadow: $ horizOffset $ vertOffset $ blur $ color; -moz-text-shadow: $ horizOffset $ vertOffset $ blur $ color; -ms-text-shadow: $ horizOffset $ vertOffset $ blur $ color; / * IE 10+ * / -o-text-shadow: $ horizOffset $ vertOffset $ blur $ color; text-shadow: $ horizOffset $ vertOffset $ blur $ color; #wrapper, # wrapper-text-shadow width: 750px; hoogte: 250 px; achtergrond: #eee; marge: 0 auto 20px; opvulling: 15px 0 0 15px; grens: 15px vaste rgba (255, 255, 255, 0,3); @omvat gecombineerde straal (6px, 6px, 6px, 6px); # wrapper-text-shadow> p font-size: 36px; kleur blauw; @ include text-shadow (0, 3px, 3px, # 333);
Index.html, voeg net na de afsluittag van div # wrapper toe
Tekstschaduwtest.
Voor de laatste stap heb ik mixins gemaakt voor doosschaduwen, achtergrondgradiënten, @ font-face-verklaringen en verbeterde typeweergave. Deze mixins zijn getest in moderne browsers (Firefox, Chrome, Safari, Opera, IE9) en bevatten alle leverancierspecifieke voorvoegsels.
Ik zal niet in details over elk een gaan; gedetailleerde opmerkingen zijn opgenomen in het bestand main.scss. Mixins volgen een standaardindeling en kunnen worden uitgebreid wanneer uw vereisten veranderen. Als u een CSS-behoefte heeft, kan een mixin worden geschreven om deze te gebruiken.
Werk uw index.html- en main.scss-bestanden bij met de volgende code. Na het vernieuwen ziet u een browservenster met een aantal vakken, die elk een andere mixtest weergeven.
Gewoon een ander Textmate-fragment Doosschaduwtest.Inzet box shadow test.Tekstschaduwtest.Achtergrond gradiëntentest.@ font-face test in Museo 700 zonder.Verbeter de leesbaarheid van tekst en tekenspatiëring.
Accentsconagua
@mixin border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) -webkit-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -moz-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -ms-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; -o-border-radius: $ topLeft $ topRight $ bottomRight $ bottomLeft; grensradius: $ topLeft $ topRight $ bottomRight $ bottomLeft; @mixin background-clip background-clip: padding-box; @mixin combined-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft) @include background-clip; @ include border-radius ($ topLeft, $ topRight, $ bottomRight, $ bottomLeft); @mixin box-shadow ($ horizOffset, $ vertOffset, $ blur, $ color) / * Vervaging is een optionele parameter, maar helpt de schaduw verzachten. Roep de mixin aan door pixelwaarden toe te passen voor $ horizOffset, $ vertOffset en $ blur en een hexwaarde voor $ color. De border-collapse-regel is opgenomen om schaduwen goed weer te geven in IE9. * / -webkit-box-shadow: $ horizOffset $ vertOffset $ blur $ color; -moz-box-shadow: $ horizOffset $ vertOffset $ blur $ color; -ms-box-shadow: $ horizOffset $ vertOffset $ blur $ color; -o-box-shadow: $ horizOffset $ vertOffset $ blur $ color; box-shadow: $ horizOffset $ vertOffset $ blur $ color; border-collapse: separate; @mixin box-shadow-inzet ($ horizOffset, $ vertOffset, $ blur, $ color) / * Zelfde parameters als @mixin box-shadow, maar creëert een innerlijke schaduw voor geperste of verdiepte effecten. * / -webkit-box-shadow: $ horizOffset $ vertOffset $ blur $ color-inset; -moz-box-shadow: $ horizOffset $ vertOffset $ blur $ color-inzet; -ms-box-shadow: $ horizOffset $ vertOffset $ blur $ color-inzet; -o-box-shadow: $ horizOffset $ vertOffset $ blur $ color-inzet; box-shadow: $ horizOffset $ vertOffset $ blur $ color inset; @mixin achtergrondgradiënt ($ richting, $ eerste kleur, $ tweede kleur) achtergrond: $ eerste kleur; achtergrondafbeelding: -webkit-lineair verloop ($ richting, $ eerste kleur, $ tweede kleur); achtergrondafbeelding: -moz-lineaire gradiënt ($ richting, $ eerste kleur, $ tweede kleur); achtergrondafbeelding: -ms-lineair verloop ($ richting, $ eerste kleur, $ tweede kleur); achtergrondafbeelding: -o-lineaire gradiënt ($ richting, $ eerste kleur, $ tweede kleur); achtergrondafbeelding: lineair verloop ($ richting, $ eerste kleur, $ tweede kleur); @ inclusief achtergrond-clip; @mixin typografie ($ font-name, $ font-longname) / * Zorg ervoor dat u een / fonts-directory maakt op hetzelfde niveau als uw / css-directory om ervoor te zorgen dat de onderstaande url-strings juist werken. Webfonts bevat de korte naam waarnaar wordt verwezen in de declaraties van lettertypefamilies en de lange naam die nodig is voor URL-verwijzingen. De mixin moet worden opgeroepen met de @include-verklaring direct hieronder om lettertypen correct te laden. * / @ 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 ") formaat ('truetype'), url (" ... / fonts / "+ $ font-longname +" .svg # webfontjVVPrHqE ") formaat ('svg'); font-gewicht: normaal; lettertype: normaal; @include typography ("Museo700", "Museo700-Regular-webfont"); @include typography ("DroidSerifRegular", "DroidSerif-Regular-webfont"); @mixin verbetert de leesbaarheid / * De mix voor verbetering van de leesbaarheid wordt aanbevolen voor kopteksten en kleinere hoeveelheden tekst vanwege het meer resource-intensieve lettertype-renderen. Het wordt niet aanbevolen voor mobiele apparaten. Raadpleeg voor meer informatie het MDN-artikel (https://developer.mozilla.org/en-US/docs/CSS/text-rendering) of Gigaom (http://gigaom.com/2010/08/12/ optimizelegibility-for-clearer-text-in-your-browser /). Inspecteer in Chrome of Safari en schakel de tekst-rendering: OptimizeLegibility-regel in en uit om het effect op tekenspatiëring te zien. Het activeert ook ligaturen op lettertypen die uitgebreide sets ondersteunen. * / tekstweergave: optimaliseerbaarheid; @ include text-shadow (0, 0, 1px, transparent); body achtergrond: lichtblauw; font-family: Helvetica, Arial, sans-serif; font-gewicht: normaal; #wrapper, # wrapp-inset-shadow, # wrapper-text-shadow, # wrapper-background-gradient, # wrapper-font-family, # wrapper-verbeteren-leesbaarheid width: 750px; hoogte: 250 px; achtergrond: #eee; marge: 0 auto 20px; opvulling: 15px 0 0 15px; grens: 15px vaste rgba (255, 255, 255, 0,3); @omvat gecombineerde straal (6px, 6px, 6px, 6px); #wrapper @ include box-shadow (0, 3px, 3px, # 333); # wrapper-inzet-schaduw @ include box-shadow-inzet (0, 3px, 3px, # 333); # wrapper-text-shadow @ include tekst-shadow (0, 3px, 3px, # 333); lettergrootte: 36px; kleur blauw; # wrapper-achtergrond-verloop @ bevat achtergrondgradiënt (boven, # 999, #fff); # wrapper-font-family font-family: "Museo700", Helvetica, Arial; # wrapper-verbeteren-leesbaarheid> h1 font-family: "DroidSerifRegular", Georgia, "Times New Roman", serif; font-gewicht: normaal; lettergrootte: 48 px; @ omvatten verbetering van de leesbaarheid; 
Sass-mixins zijn een geweldige manier om snel aan de slag te gaan met CSS3. Of u nu code in uw computer gebruikt of een hele site helemaal opnieuw bouwt, met mixins wordt uw workflow verbeterd door de ingetypte lijnen en tijdverspilling bij het beoordelen van de syntaxis te verminderen.
Omdat deze functies CSS3-gericht zijn, zou u een back-upplan moeten hebben voor oudere browsers. Voor sommige sites zijn afgeronde hoeken en schaduwen niet kritisch en is het volkomen acceptabel om een verslechterde visuele lay-out te vertonen. Voor anderen kan een polyfill zoals Modernizr feature-specifieke klassen bieden om fallback CSS-regels te schrijven.
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
