CSS-Variablen

[Gunnar Bittersmann]

@@marctrix

Ich hatte letztens einen Fall, wo ich CSS-Variablen gebraucht hätte. Und zwar echte; CSS-Postprozessor ging nicht.

Und Präprozessor? ;-)

Nein im Ernst, könntest du den Fall mal schildern?

Plattform für recht viele Kunden, wo sich jeder von denen das Aussehen (Logo, Farben etc.) für sich selbst bestimmen konnte.

Präprozessor war im Einsatz:

kunde1.scss (wird kompiliert zu kunde1.css):

$background-color: white;
$text-color: black;
$logo-url: https://example.com/logos/kunde1.png;

@import "styles";

kunde2.scss (wird kompiliert zu kunde2.css):

$background-color: black;
$text-color: white;
$logo-url: https://example.com/logos/kunde2.png;

@import "styles";

_styles.scss (erzeugt keine Datei, sondern wird in alle kunde#.css eingebunden):

html
{
  background-color: $background-color;
  color: $text-color;
}

body > header
{
  background-image: url($logo-url);
}

So wurde für jeden Kunden sein Stylesheet generiert: kunde1.css, kunde2.css, … Es waren aber nicht nur 2, sondern eher so im dreistelligen Bereich. Und das Stylesheet natürlich viel umfangreicher. Das Generieren von hunderten Stylesheets dauerte dann schon eine knappe Minute, und das bei jeder klitzekleinen Änderung.

Mit CSS-Variablen wär alles besser gewesen:

kunde1.css:

:root
{
  --background-color: white;
  --text-color: black;
  --logo-url: "https://example.com/logos/kunde1.png";
}

kunde2.css:

:root
{
  --background-color: black;
  --text-color: white;
  --logo-url: "https://example.com/logos/kunde2.png";
}

styles.scss (wird kompiliert zu styles.css):

html
{
  background-color: var(--background-color);
  color: var(--text-color);
}

body > header
{
  background-image: url(var(--logo-url));
}

Aus style.scss wird lediglich style.css kompiliert, was ruckuck geht. Für jeden Kunden wird seine kunde#.css und die style.css ausgeliefert.

LLAP 🖖