Bourbon on the Rocks coole functies om je Sass te verbeteren

Bourbon biedt een handvol super handige functies die een welkome toevoeging zijn aan de native functies die Sass biedt. Laten we eens kijken naar enkele coole voorbeelden die u zou moeten toevoegen aan uw glas.

functies

Waar mixins ons helpen om stukken brokken efficiënter te herhalen, helpen Sass-functies ons met logica: argumenten accepteren en waarden retourneren. Bourbon biedt enkele zeer handige Sass-functies voor verschillende gebruiksgevallen. In deze zelfstudie bekijken we de volgende selectie:

• gouden ratio()
• Modulaire schaal ()
• lineaire gradiënt
• tint()
• schaduw()
• em ()

gouden ratio()

Met deze functie is het heel eenvoudig om de gulden snede (1: 1.6180339) van een bepaald aantal te berekenen. Als een hoofdletter moet ik vermelden dat deze functie langzaam wordt beëindigd, waardoor plaats wordt gemaakt voor de Modulaire schaal () functioneer in plaats daarvan. De gouden ratio() functie is handig als u bijvoorbeeld "zinvolle" relaties binnen uw typografie wilt creëren. Hetzelfde geldt voor structurele relaties binnen je lay-out.

Typografische schaal

Als u een modulaire schaal wilt genereren om verschillende groottes van het type te structureren met behulp van de gulden snede, kunt u deze functie gebruiken om de te berekenen gouden bedoelingen voor elk nummer. Het is eenvoudig om uw typografische schaal te bouwen:

De eerste parameter van de functie verwacht een pixel of em waarde-hier voorgesteld door een Sass-variabele die hierboven is gedefinieerd. De tweede parameter vereist een geheel getal als een increment / decrement waarde (... -3, -2, -1, 0, 1, 2, 3 ...) voor het op en neer gaan van de schaal met behulp van de gulden snede.

Dit is onze typografische schaal met behulp van de gulden snede:

Sass:

$ base-font-size: 10px body font-size: $ base-font-size .footnote font-size: golden-ratio ($ base-font-size, -1) // decrement size value proportionally to golden ratio by factor 1 h3 lettertype: goud-verhouding ($ base-font-size, 1) h2 font-size: golden-ratio ($ base-font-size, 2) // waarde van de verhogingswaarde evenredig met de gulden snede per factor 1 h1 font-size: golden-ratio ($ base-font-size, 3) 

CSS-uitvoer:

body font-size: 10px;  .footnote font-size: 6.18px;  h3 font-size: 16.18px;  h2 font-size: 26.179px;  h1 font-size: 42.358px;  

Als u de uitvoer moet afronden, kunt u de ingebouwde functies van Sass voor dat doel gebruiken:

• buikspieren()
• verdieping()
• ceil ()

Sass:

.voetnoot font-size: floor (golden-ratio ($ base-font-size, -1)) 

Onder de motorkap

Intern gebruikt de gulden snijfunctie de modulaire schaalfunctie, met de schaalvariabele $ golden voor een gouden ratio.

Sass:

@function golden-ratio ($ value, $ increment) @return modular-scale ($ value, $ increment, $ golden) 

Notitie: Het fantastische Bourbon Neat-rasterwerk maakt ook standaard gebruik van de gulden snede voor dakgoten en kolommen.

Modulaire schaal ()

Als u van 'zinvollere typografie' houdt en een modulaire schaal voor verschillende lettergroottes wilt berekenen, op basis van een soort numerieke relatie, is deze functie wellicht interessant voor u. Het kan verschillende modulaire schalen voor u berekenen - de gulden snede is slechts een van de zeventien voorgebakken opties.

Sass:

$ base-font-size: 10px // Uw keuze van de verhouding opgeslagen in een variabele om deze op één plaats te veranderen // Hier gebruikte ik de dubbele octaafverhouding $ scale-type: $ double-octave body font-size: $ base-font-size .footnote font-size: modular-scale ($ base-font-size, -1, $ type-van-schaal) h3 font-size: modular-scale ($ base-font-size, 1 , $ type-van-schaal) h2 font-size: modular-scale ($ base-font-size, 2, $ type-van-schaal) h1 font-size: modular-scale ($ base-font-size, 3 , $ type-van-schaal) 

Variabelen schalen

Bourbon heeft deze variabelen van vooraf gedefinieerde verhoudingen voor verschillende schalen opgesteld. Om een ​​consistent ontwerp te maken, zou het een goede beslissing zijn om verschillende verhoudingen voor uw typografische schaal in één project niet te combineren. Houd het stijlvol door één ratio te kiezen die het beste overeenkomt met uw intenties.

Sass:

$ base-font-size: 10px h2 font-size: modular-scale ($ base-font-size, 2, 1.6180) 

lineaire gradiënt ()

Als je een lineair verloop in combinatie met je mix-achtergrondafbeelding nodig hebt, zal deze functie je behoorlijk wat code besparen. De kleur van het verloop wordt bepaald door de startkleur, de eindigende kleur en optioneel stop-kleur punten tussenin. Deze extra kleurstops bieden u de mogelijkheid om geavanceerdere overgangen tussen de begin- en eindkleuren te maken of een kleurrijker verloop te bieden.

Bekijk deze vreselijke gradiënt. Hier denk ik dat het gemakkelijk is om te zien hoe het lineaire gradiënt () functie werkt en hoe je het kunt gebruiken:

Sass:

.afschuwelijk gradiënt + achtergrondafbeelding (lineair verloop (45deg, // richtpunt van verlooplijn rood 10%, // startkleur geel 15%, // S // bloedt in rood geel 40%, // T oranje 45% , // O // bloedt in geel oranje 50%, // P oranje 70%, // S // bloedt in groen groen 90%) // eindkleur) hoogte: 50px 

Voor kleuren die u optioneel kunt leveren %, px of em waarden. Deze bepalen de afstand die deze kleur moet uitstrekken. U moet waarschijnlijk vasthouden aan het gebruik % meestal wel. Als u geen percentages als beperkingswaarden opgeeft, worden de kleuren gelijkmatig verdeeld, gedeeld door het aantal kleuren in het verloop.

U kunt optioneel een hoek opgeven voor de eerste parameter, ofwel in de vorm van waarde + deg of naar met richting:

• 45deg
• 90deg
• naar links bovenaan
• naar rechts
• naar links

enzovoorts.

Sass: met richtingsparameter-van links naar rechts

.gradiënt + achtergrondafbeelding (lineair verloop (naar rechts, geel 50%, blauw 60%)) hoogte: 50 px 

Het verloop gaat van links naar rechts

Of iets geavanceerder met HSLA () functies en meerdere lineaire gradiënt () functies:

Sass:

.gradiënt + achtergrondafbeelding (lineaire gradiënt (hsla (0, 100%, 100%, 0,25) 0%, hsla (0, 100%, 100%, 0,08) 50%, transparant 50%), lineair verloop (# 4e7ba3, donkerder (# 4e7ba4, 10%))) hoogte: 50 px 

Tint en schaduw kleurenfuncties

Je bent misschien al bekend met de ingebouwde functies van Sass voor kleuren zoals verlichten() en donkerder () die precies doen wat je zou verwachten. Bourbon biedt twee extra geweldige kleurfuncties voor uw gemak. Beide functies nemen een kleur- en percentageparameter om de kleurenmix te verfijnen.

tint()

De tintfunctie verandert een kleur door deze te mengen met wit. Het verwacht een tweede parameter die het percentage wit waarmee je de kleur wilt mengen, neemt.

Sass:

$ lichtblauw: # 2F7DD1 .tint achtergrond: tint ($ lichtblauw, 25%) hoogte: 100 px 

Dit is zonder tint ():

En dit is met tint ():

schaduw()

De schaduwfunctie verandert een kleur door deze te mengen met zwart. Deze functie neemt ook een parameter in kleur en percentage om de kleurenmix te verfijnen.

Sass:

$ lichtblauw: # 2F7DD1 .schaduwachtergrond: schaduw ($ lichtblauw, 25%) hoogte: 100 px 

Hier zien we wat er gebeurt zonder schaduw ():

En hier met schaduw ():

em ()

Deze functie berekent pixels naar ems voor u.

Sass:

lettergrootte: em (12) 

CSS-uitvoer:

lettergrootte: 0.75em; 

Proost!

Dat heeft Bourbon aardig behandeld voor nu. In de laatste paar tutorials hebben we uitgebreid gekeken naar enkele van de nuttigste mixins en functies die het biedt.

In het volgende deel van deze lopende reeks zullen we een kijkje nemen naar Bourbon Neat: een rasterwerk voor Sass en Bourbon.