@@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): ~~~scss $background-color: white; $text-color: black; $logo-url: https://example.com/logos/kunde1.png; @import "styles"; ~~~ kunde2.scss (wird kompiliert zu kunde2.css): ~~~scss $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): ~~~scss 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**: ~~~css :root { --background-color: white; --text-color: black; --logo-url: "https://example.com/logos/kunde1.png"; } ~~~ kunde2.**css**: ~~~css :root { --background-color: black; --text-color: white; --logo-url: "https://example.com/logos/kunde2.png"; } ~~~ styles.scss (wird kompiliert zu styles.css): ~~~scss 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 🖖 -- _“I love to go to JS conferences to speak about how to avoid using JavaScript. Please learn CSS & HTML to reduce your JS code bloat.”_{: lang="en"} —Estelle Weyl

@@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 der 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): ~~~scss $background-color: white; $text-color: black; $logo-url: https://example.com/logos/kunde1.png; @import "styles"; ~~~ kunde2.scss (wird kompiliert zu kunde2.css): ~~~scss $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): ~~~scss 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**: ~~~css :root { --background-color: white; --text-color: black; --logo-url: "https://example.com/logos/kunde1.png"; } ~~~ kunde2.**css**: ~~~css :root { --background-color: black; --text-color: white; --logo-url: "https://example.com/logos/kunde2.png"; } ~~~ styles.scss (wird kompiliert zu styles.css): ~~~scss 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 🖖 -- _“I love to go to JS conferences to speak about how to avoid using JavaScript. Please learn CSS & HTML to reduce your JS code bloat.”_{: lang="en"} —Estelle Weyl