Bourbon on the Rocks Coole Funktionen zur Verbesserung Ihres Sass

Bourbon bietet eine Handvoll sehr nützlicher Funktionen, die eine willkommene Ergänzung zu den systemeigenen Funktionen von Sass darstellen. Schauen wir uns einige coole Beispiele an, die Sie Ihrem Glas hinzufügen sollten.

Funktionen

Wo Mixins uns dabei helfen, Stilabschnitte effizienter zu wiederholen, helfen uns Sass-Funktionen mit Logik: Argumente akzeptieren und Werte zurückgeben. Bourbon bietet einige sehr nützliche Sass-Funktionen für eine Vielzahl von Anwendungsfällen. In diesem Tutorial werfen wir einen Blick auf die folgende Auswahl:

• Goldener Schnitt()
• modularer Maßstab ()
• linearer Gradient
• Farbton()
• Schatten()
• em ()

Goldener Schnitt()

Mit dieser Funktion ist es sehr einfach, den Goldenen Schnitt (1: 1.6180339) einer bestimmten Zahl zu berechnen. Als Heads-up sollte ich erwähnen, dass diese Funktion langsam abgelehnt wird und der modularer Maßstab () Funktion stattdessen. Das Goldener Schnitt() Funktion ist nützlich, wenn Sie beispielsweise innerhalb Ihrer Typografie "sinnvolle" Beziehungen erstellen möchten. Dasselbe gilt für strukturelle Beziehungen innerhalb Ihres Layouts.

Typografische Skala

Wenn Sie eine modulare Waage erstellen möchten, um verschiedene Typengrößen mithilfe des Goldenen Verhältnisses zu strukturieren, können Sie diese Funktion verwenden, um den Wert zu berechnen goldene Mitte für eine beliebige Anzahl. Das Erstellen Ihrer typografischen Skala damit ist unkompliziert:

Der erste Parameter der Funktion erwartet a Pixel oder em Wert hier durch eine oben definierte Sass-Variable dargestellt. Der zweite Parameter erfordert eine ganze Zahl als Inkrement- / Dekrementwert (… -3, -2, -1, 0, 1, 2, 3…), um die Skala mit dem Goldenen Schnitt nach oben und unten zu verschieben.

Hier ist unsere typografische Skala mit dem Goldenen Schnitt:

Sass:

$ base-font-size: 10px body font-size: $ base-font-size .footnote font-size: goldenes Verhältnis ($ base-font-size, -1) // Wert der Dekrementgröße proportional zum Goldenen Verhältnis nach Faktor 1 h3 Schriftgröße: Goldenes Verhältnis ($ Basis-Schriftgröße, 1) h2 Schriftgröße: Goldenes Verhältnis ($ Basis-Schriftgröße, 2) // Zuwachsgröße proportional zum Goldenen Verhältnis um Faktor 1 h1 Schriftgröße: Golden-Ratio ($ Basis-Schriftgröße, 3) 

CSS-Ausgabe:

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

Wenn Sie die Ausgabe abrunden müssen, können Sie dafür die integrierten Funktionen von Sass verwenden:

• Abs()
• Fußboden()
• ceiling ()

Sass:

.Fußnoten-Schriftgröße: Fußboden (goldenes Verhältnis ($ Basis-Schriftgröße, -1)) 

Unter der Haube

Intern verwendet die Golden-Ratio-Funktion die Modular-Scale-Funktion mit der Skalierungsvariablen $ golden für das goldene Verhältnis.

Sass:

@Funktions-Golden-Ratio ($ value, $ inkrement) @return modular-scale ($ value, $ inkrement, $ golden) 

Hinweis: Das fantastische Bourbon Neat-Raster-Framework verwendet standardmäßig auch den Goldenen Schnitt für Dachrinnen und Säulen.

modularer Maßstab ()

Wenn Sie sich für „aussagekräftigere Typografie“ interessieren und eine modulare Skala für verschiedene Schriftgrößen basierend auf einer Art numerischer Beziehung berechnen möchten, könnte diese Funktion für Sie interessant sein. Es kann verschiedene modulare Skalen für Sie berechnen - der Goldene Schnitt ist nur eine von siebzehn vorgebackenen Optionen.

Sass:

$ base-font-size: 10px // Das von Ihnen ausgewählte Verhältnis wurde in einer Variablen gespeichert, um sie an einer Stelle zu ändern. // Hier habe ich das Doppel-Oktav-Verhältnis verwendet. $ type-of-scale: $ Doppel-Oktave-Schriftgröße: $ base-font-size .footnote font-size: modular-scale ($ base-font-size, -1, $ type-scale) h3 font-size: modular-scale ($ base-font-size, 1 ($ type-of-scale) h2 font-size: modular-scale ($ base-font-size, 2, $ type-of-scale) h1 font-size: modular-scale ($ base-font-size, 3 , $ Skalentyp) 

Skalierungsvariablen

Bourbon bereitete diese Variablen mit vordefinierten Verhältnissen für verschiedene Skalen vor. Um ein konsistentes Design zu erstellen, wäre es eine gute Entscheidung, keine unterschiedlichen Verhältnisse für Ihre typografische Skala in einem Projekt zu kombinieren. Bleiben Sie stilvoll, indem Sie sich für ein Verhältnis entscheiden, das Ihre Absichten am besten widerspiegelt.

Sass:

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

linearer Gradient ()

Wenn Sie einen linearen Farbverlauf in Kombination mit Ihrem Hintergrund-Bild-Mix benötigen, können Sie mit dieser Funktion viel Code sparen. Die Farbe des Verlaufs wird durch das Symbol definiert Startfarbe, das Endefarbe und optional Stop-Color-Punkte zwischen. Diese zusätzlichen Farbstopps geben Ihnen die Möglichkeit, differenziertere Übergänge zwischen den Start- und Endfarben zu erstellen oder farblichere Farbverläufe zu erzielen.

Schauen Sie sich diesen schrecklichen Farbverlauf an. Hier finde ich es leicht zu sehen wie linearer Gradient () Funktion funktioniert und wie Sie sie nutzen können:

Sass:

.schrecklicher Gradient + Hintergrundbild (linearer Gradient (45 Grad, // Richtung der Gradientenlinie rot 10%, // Startfarbe gelb 15%, // S // blutet in rot gelb 40%, // T orange 45% , // O // blutet in gelborange 50%, // P orange 70%, // S // blutet in grün grün 90%) // Endfarbe) Höhe: 50px 

Für Farben können Sie optional angeben %, px oder em Werte. Diese definieren den Abstand, den diese Farbe ausdehnen soll. Du solltest wahrscheinlich bei der Verwendung bleiben % Meistens aber. Wenn Sie keine Prozentsätze als Begrenzungswerte angeben, werden die Farben gleichmäßig gestreckt, dividiert durch die Anzahl der Farben im Verlauf.

Sie können optional einen Winkel für den ersten Parameter angeben - entweder in Form von Wert + deg oder zu mit Richtung:

• 45 Grad
• 90 Grad
• nach links oben
• nach rechts
• nach links

und so weiter.

Sass: mit Richtungsparameter von links nach rechts

.Farbverlauf + Hintergrundbild (linearer Farbverlauf (nach rechts, gelb 50%, blau 60%)) Höhe: 50px 

Der Gradient fließt von links nach rechts

Oder etwas anspruchsvoller mit hsla () Funktionen und mehrere linearer Gradient () Funktionen:

Sass:

.Gradient + Hintergrundbild (linearer Gradient (hsla (0, 100%, 100%, 0,25) 0%, hsla (0, 100%, 100%, 0,08) 50%, transparent 50%), linearer Gradient (# 4e7ba3, dunkler (# 4e7ba4, 10%))) Höhe: 50px 

Farbton- und Schattenfarbfunktionen

Sie sind möglicherweise bereits mit den integrierten Funktionen von Sass für Farben wie vertraut erleichtern() und verdunkeln() die genau das tun, was Sie erwarten würden. Bourbon bietet zwei weitere tolle Farbfunktionen für Ihre Bequemlichkeit. Beide Funktionen benötigen einen Farb- und einen Prozentwert, um die Farbmischung fein einzustellen.

Farbton()

Die Farbtonfunktion ändert eine Farbe, indem sie mit Weiß gemischt wird. Es erwartet einen zweiten Parameter, der den Prozentsatz an Weiß angibt, mit dem Sie die Farbe mischen möchten.

Sass:

$ hellblau: # 2F7DD1 .tint Hintergrund: Farbton ($ hellblau, 25%) Höhe: 100px 

Dies ist ohne Tönung ():

Und das ist mit Tönung ():

Schatten()

Die Farbfunktion ändert eine Farbe durch Mischen mit Schwarz. Diese Funktion benötigt auch einen Farb- und Prozentwert, um die Farbmischung zu optimieren.

Sass:

$ hellblau: # 2F7DD1 .shade Hintergrund: Schatten ($ hellblau, 25%) Höhe: 100px 

Hier sehen wir, was ohne Schatten () passiert:

Und hier mit Schatten ():

em ()

Diese Funktion berechnet für Sie Pixel in Ems.

Sass:

Schriftgröße: em (12) 

CSS-Ausgabe:

Schriftgröße: 0.75em; 

Prost!

Das ist Bourbon fürs Erste schön. In den letzten paar Tutorials haben wir uns einige der nützlichsten Mixins und Funktionen ausführlich angesehen.

Im nächsten Teil dieser fortlaufenden Serie werfen wir einen Blick auf Bourbon Neat: ein Raster für Sass und Bourbon.