Vaadin, SCSS und der Gradient

Zurzeit bin ich damit beschäftigt, eine bestehende Anwendung eines Kunden mit dem Webapp-Framework Vaadin nachzubauen. Neues Framework, neue Herausforderungen – in diesem speziellen Fall im Zusammenhang mit einem Gradienten (Farbverlauf) und der von Vaadin eingesetzten CSS-Erweiterung SASS/SCSS.

Die Aufgabe

Zur nachzubauenden Weboberfläche gehört unter anderem ein Logo mit Farbverlauf (Gradient) im Hintergrund:

Vaadin, SCSS und der Gradient

Nun verwendet Vaadin für die Gestaltung der Weboberflächen statt Standard-CSS die Erweiterung SASS mit SCSS-Syntax. Eigentlich eine schicke Sache, da durch Variablen, Mixins und Schachtelung von Styles eine bessere Wiederverwendung im Style-Codes sowie erreicht wird. Nachteil: Die SCSS-Dateien müssen im Rahmen des Build-Prozesses zu einer CSS-Datei kompiliert werden, die anschließend in die Webanwendung eingebunden wird.

Die Herausforderung

Mein Problem war nun, dass die Anweisung background-image: linear-gradient(#85bae0, #5489c2); vom SCSS-Compiler schlicht ignoriert wurde, so dass die Anweisung im resultierenden CSS nicht enthalten war.

Die Lösung

Ganz nach dem Motto „kaum macht man’s richtig, funktioniert’s auch schon“ war die Lösung, stattdessen die SCSS-Anweisung @include background-image(linear-gradient(top, #85bae0, #5489c2)); zu verwenden. Es wird also eine Funktion aufgerufen, die nicht nur die oben beschriebene CSS-Anweisung erzeugt, sondern zusätzliche browserspezifische Varianten für alle gängige Browser (wie z.B. -webkit-linear-gradient) generiert.