A Smart Button Mixin

Vor einer Weile habe ich beschlossen, für meine Buttons ein Sass Mixin zu schreiben, nur ist mir dabei aufgefallen, dass ich mehrere Farben brauche, die sich nicht ganz so einfach generieren liessen, wie anfangs gedacht. Und dann gab es noch das Problem der Schriftfarbe, welche entweder weiss oder schwarz sein sollte, je nach dem, was sich halt besser lesen liess. Man hätte mit mehreren Variabeln lösen können, aber ich hab beschlossen, mit Funktionen zu spielen und das Problem auf diese weise zu lösen.

Lightness

Das erste Problem, das mit der Schriftfarbe hatte ich relativ schnell gelöst. Sass besitzt eine Funktion, die einem den Helligkeitswert einer Farbe ausgiebt. Diese habe ich mir ausrechnen lassen und dann durch eine Funktion definiert, dass helle Farben die Schriftfarbe weiss und dunkle Farben die Schriftfarbe schwarz bekommen. Damit ich wusste, wie der Helligkeitswert ausschaut, habe ich diesen Wert in einem pseudoelement platziert und mir anzeigen lassen.

See the Pen AwKEx by Myri (@bekreatief) on CodePen.

Das zweite Problem war der Schatten, des Buttons.
Startet man mit einer hellen Farbe, muss man diese um einen geringeren Wert verdunkeln, als mit einer dunkeln Farbe, um einen schönen Effekt zu erzielen. Also habe ich drei Stufen von Helligkeiten definiert und dort den verdunklungsgrad angepasst.

See the Pen GownI by Myri (@bekreatief) on CodePen.

Und damit konnte ich nun ein Button-Mixin schreiben, welches für jede Farbe geeignet ist.

See the Pen flat buttons by Myri (@bekreatief) on CodePen.