Color Themes - Workflow mit SCSS und Postcss

Zum Thema habe ich zufällig ein praktisches Postcss-Plugin gefunden.

Wer mit SCSS gestaltet und sowohl die .scss als auch die generierte .css bereit stellt geht davon aus,
das jeder User mit ein paar Änderungen an den SCSS Variablen z.B. ganz einfach seine eigenen Farbvorstellungen umsetzen kann.

Allerdings nicht jeder User ist in der Lage oder Willens dafür eine lokale Contao Umgebung aufzusetzen und dann mit Node.js und node-sass zu hantieren.

Jetzt könnte man hergehen und die .scss Datei dann anstelle der .css Datei direkt in Contao anzusprechen und zu editieren. Es gibt aber zahlreiche Gründe warum die
Nutzung der .css Datei vorteilhafter ist und favorisiert werden sollte ( Von der Vorgehensweise bei Speicherung einzelner Partials und dem Contao Cache mal ganz abgesehen,
was ist wenn man eine Funktion nutzt die nur in der gearde aktuellsten Sass Version zur Verfügung steht? Usw.... ).

Wahrscheinlich ist der größte Anwendungsfall lediglich die Änderung einer oder mehrerer Farben.
Zur Umsetzung von Color-Themes via SCSS gibt es zahlreiche Tutorials z.B.: [1][2]

Allerdings bläht dies das finale CSS nur unnötig auf und darüberhinaus können eh nie alle Möglichkeiten/Wünsche abgedeckt werden.
Man könnte alternativ eine separate color.css manuell pflegen. Dies wäre jedoch umständlich und vor allem anfällig für Fehler.

Hier kommt nun besagtes Postcss [3] Plugin "postcss-colors-only" ins Spiel:
https://github.com/rsanchez/postcss-colors-only


[1] https://www.sitepoint.com/dealing-color-schemes-sass/
[2] https://medium.com/@dmitriy.borodiy/...s-bc38fd5734d1
[3] https://postcss.org/


Das Postcss Plugin: "postcss-colors-only"
Das Plugin macht genau das: Es analysiert eine bestehende .css und generiert eine Neue die lediglich die Farbangaben beinhaltet.
Dabei kommen auch einige Transformationen ins Spiel: Aus "border: 1px solid #000;" wird z.B. " border-color: #000;"

Also beispielsweise aus einer originären via SCSS erstellten "theme.css":

Code:

---

.foo {
  color: red;
  border: 1px solid #ab560f;
  font-size: 16px;
  background-image: linear-gradient(to-bottom, red, blue);
}
.bar {
  color: rgba(0, 128, 255, 0.5);
}
.baz {
  display: block;
}

---

wird eine zusätzliche "color.css" generiert:

Code:

---

.foo {
  color: red;
  border-color: #ab560f;
  background-image: linear-gradient(to-bottom, red, blue);
}
.bar {
  color: rgba(0, 128, 255, 0.5);
}

---

Bequemes Theming in Contao
Diese "color.css" kann, sofern gewünscht, dann in Contao einfach nach der eigentlichen "theme.css" eingebunden werden und überschreibt somit die Farbangaben.
Änderungen können vom User über die Contao Dateiverwaltung vorgenommen werden.

Oder man importiert die "color.css" in ein internes Contao Stylesheet evtl. mit Nutzung der Contao "Globalen Variablen" zur noch einfacheren Verwaltung für den User.


Einsatz mit Node Scripts
Ich verwende für Sass, Image/SVG Optimierungen etc. die Node Scripts als Task-Runner [1][2][3] und kann auf aufgeblähte Gulp Files verzichten.

Daher habe ich die "postcss-cli" [4] verwendet ( Nicht global sondern lokal installiert ) zusammen mit dem Plugin und der "--save-dev" Option.
Unterschied zum "normalen" Postcss [5] ist hier der Umgang mit Config files: Als .js Datei anstelle einer .json.

Auf der Kommandozeile könnte man dann das Plugin mit den Default Optionen direkt nutzen:

Code:

---

npx postcss input.css --no-map --use postcss-colors-only --output output.css --local-plugins

---

Wer ein o. mehrere Plugins weiter konfigurieren möchte erstellt dann eine "postcss.config.js" die autom. herangezogen wird. Am Beispiel des "postcss-colors-only" Plugins dann:

Code:

---

module.exports = {
  plugins: [
    require('postcss-colors-only')({ withoutGrey: false, withoutMonochrome: false, inverse: false }),
  ]
}

---

Als Script Eintrag in der package.json dann nur noch: "build:colorTheme": "postcss input.css --no-map --output output.css --local-plugins"
und dann mit "npm run build:colorTheme" aufrufen


[1] https://docs.npmjs.com/misc/scripts
[2] https://www.keithcirkel.co.uk/how-to...-a-build-tool/
[3] https://deliciousbrains.com/npm-build-script/
[4] https://github.com/postcss/postcss-cli
[5] https://github.com/postcss/postcss


SCSS Variablen, Placeholder und @extend
Der Einsatz von @extend bietet einige Fallstricke. Sparsam eingesetzt ist es aber gerade in diesem Zusammenhang nützlich,
denn bei identischen Style Angaben werden, Komma-Separiert, die betroffenen CSS Klassen/Selektoren gelistet.
Was dann später auch der Übersicht in der "color.css" dient.

Exemplarisch, ohne Partials o. Variablen Arrays/Maps:

Code:

---

// Sample Vars
$col-first-fg:  #fff !default;
$col-first-bg:  #000 !default;
$col-first-active:  #ddd !default;

// Sample Placeholder
%col-fg  { color:  $col-first-fg }
%col-bg  { background-color: $col-first-bg}
%col-border  { border-color: $col-first-active}

.foo {
  border: 1px;
  font-size: 16px;
 
  @extend %col-fg;
  @extend %col-border;
}

.foo_1 {
  padding: 40px;
  border: 2px;
 
  @extend %col-border;
  @extend %col-bg;
}

.foo_3 {
  margin: 0;
  display: block;
 
  @extend %col-fg;
  @extend %col-bg;
}

.foo_4 {
  margin: 0;
  display: inline;
}

.baz {
  display: block;
}

---

Und dann als Resultat über besagtes Postcss-Plugin in der späteren color.css:

Code:

---

.foo, .foo_3 {
  color: #fff;
}

.foo_1, .foo_3 {
  background-color: #000;
}

.foo, .foo_1 {
  border-color: #ddd;
}

---

You get the idea ...