Schritt für Schritt - Bearbeitung eines Layout-Theme mit sass/scss/less

[Franko]

Hallo,
nach den Forum Beiträgen bez. "Abschaffung des internen Editors" [1]
bekam ich zahlreiche private Nachrichten/Anfragen in Zusammenhang mit der Nutzung externer Editoren
vor allem aber hinsichtlich der lokalen sass/scss Nutzung/Umsetzung.

Dies hat mich doch erstaunt.
Einerseits, das viele wohl den internen Editor nutzen und andererseits,
das die Umstellung auf einen lokalen scss Workflow für viele doch eine Hürde darstellt.

Daher dachte ich einige Anmerkungen diesbezüglich schaden nicht.

Zwar favorisiere ich hier "scss", die grundsätzliche Vorgehensweise für "less" sollte aber identisch sein.

Dies ist kein Tutorial:

• Zum Erlernen aller CSS Möglichkeiten
• Zum Erlernen aller sass/scss/less Möglichkeiten

Legende:

• Alternative zur Nutzung des Contao "internen Editors" und der "globaler Variablen"
• In Contao scss/less direkt nutzen
• Die lokale "node" Installation und Installation eines "node Modules" hier "node-sass"
• Unterschied globale / lokale Installation von node Modulen
• Das "node-sass" Modul im Einsatz
• Node-Scripts als Task Runner
• Aufteilung in separate Dateien - Die Partials
• In der Praxis
• Ausblick
• Direkte scss Bearbeitung mit den Chrome DevTools

[1] https://community.contao.org/de/show...ner-CSS-Editor

[Franko]

• Zunächst exportiert/speichert man unter "Themes/Stylesheets" das Stylesheet des internen Editors als separate .css Datei ab.
• Im Anschluß lädt man diese über den Dateimanager hoch.
• Anschließend bindet man diese .css unter "Externe Stylsheets" im Bereich "Themes/Seitenlayouts" ein.
• Im Bereich "Interne Stylesheets" kann das bisherige ( interne ) Style dann deaktiviert oder gänzlich gelöscht werden.

Innerhalb von Contao könnte man die .css nun über den Dateimanager direkt bearbeiten.

Zum bequemen Arbeiten sollte man jedoch eine lokale Contao Installation vorhalten ( z.B. über XAMPP [1] oder Docker [2] ).

Man kann die .css mit einem Editor seiner Wahl dann lokal bearbeiten und die Auswirkungen testen.
Funktioniert alles übertragt man final die jeweiligen Dateien auf den Hoster/Server.


[1] https://community.contao.org/de/show...-u-Xampp-7-2-1
[2] https://community.contao.org/de/show...PP-Alternative

[Franko]

Contao kann scss/less interpretieren.

Grundsätzlich benötigt man von daher keine lokale Installationen diesbezüglich.

Im Dateimanager die .css Datei umbenennen in .scss und entsprechende Angaben ( z.B. sass Variable ) setzen [1]
Dies beinhaltet jedoch u.U einige "Fallstricke" die man berücksichtigen sollte - siehe Beitrag [2] und davor ...

Direkt im Dateimanager zu arbeiten ist möglich und für kleinere Änderungen durchaus machbar.

Insgesamt aber umständlicher.
Wenn man also eh eine lokale Contao Installation hat ist die Bearbeitung über externe Editoren angenehmer.

Meine favorisierte Vorgehensweise daher:

• Bindet in Contao nur die .css Datei(en) ein.
• Bearbeitet lokal .scss Dateien und kompiliert diese nach .css.

[1] https://community.contao.org/de/show...l=1#post509547
[2] https://community.contao.org/de/show...l=1#post508012

[Franko]

Wie immer existieren verschiedene Möglichkeiten zur Generierung von .scss Datein nach .css.

Über Online Tools [1,2] kann man .scss direkt testen.
Dies bietet sich an um schnell seine Angaben zu überprüfen.

Die wohl geläufigste lokale Umsetzung ist dann aber über eine "node.js Installation" [3] und dem node Modul "node-sass" [4].


Step 1: Die node(.js) Installation

Zunächst installiert man sich "node" [3].
Nach erfolgreicher Installation sollte man im Anschluß im Terminal/Konsole der Wahl
die entsprechenden Versionsangaben über die Eingabe erhalten:

node -v
npm -v
npx -v

Anmerkung:
Wer lokal die Docker/devilbox.org [5] einsetzt, könnte grundsätzlich auch auf eine lokale node.js Installation verzichten.
Im jeweiligen Docker PHP Container der devilobox ist z.B. neben composer auch node.js vorinstalliert/erreichbar.


Step 2: Das Module "node-sass" installieren

Im Terminal erstellt man sich ein Verzeichnis z.B "test" und wechselt in dieses.
Wir benötigen eine "package.json". Geben Sie ein:

npm init -y

Im "test" Verzeichnis liegt jetzt die Datei "package.json".
Wir installieren jetzt das Module "node-sass":

npm install node-sass

Sie haben im "Test" Verzeichnis jetzt zusätzlich das Verzeichnis "node_modules" vorliegen.
Im Grunde können Sie jetzt via "node-sass" Ihre .scss im aktuellen Verzeichnis bearbeiten und kompilieren.


[1] https://www.sassmeister.com/
[2] https://webmaker.app/

[3] https://nodejs.org/en/
[4] https://github.com/sass/node-sass
[5] http://devilbox.org/

[Franko]

Kleiner Ausflug.
Im obigen Beispiel haben wir das Modul "node-sass" lokal installiert ( Stöbern Sie mal im "node_modules" Verzeichnis ).

Bei Aufruf von "node-sass -v" ehalten Sie dann eine Meldung ala "command not found".
Die auszuführenden Dateien liegen im Verzeichnis "node_modules/.bin". Bei Eingabe von:

node_modules/.bin/node-sass -v

erhalten wir daher eine korrekte Versionsangabe.

Node bietet dazu "npx".
Hierbei ist die Pfad Angabe nicht notwendig:

npx node-sass -v

Anmerkung:
Gleiches gilt wenn Sie Ihre Anweisungen als node-script hinterlegen [1] ( npm run SCRIPTNAME ).
Auch hierbei ist die Angabe auf das ".bin" vernachlässigbar.

Bei einer globalen Installation z.B. über "npm install -g node-sass" wird das "node_modules" Verzeichnis in Ihrem OS User-Verzeichnis abgelegt.
Entsprechend sollte die auszuführende Datei "node-sass" dann überall ( global ) erreichbar sein.

Eine Übersicht der global installierten Module erhält man via :

npm list -g --depth 0

Eine Übersicht der lokal - im jeweiligen Arbeitsverzeichnis -installierten Module erhält man via :

npm list --depth 0

Ich bevorzuge immer die lokale Installation wenn möglich.
Dies ist übersichtlicher und man kann auch unterschiedliche Versionen eines Moduls je Arbeitsverzeichnis in der "package.json" hinterlegen.


[1] https://docs.npmjs.com/misc/scripts

[Franko]

Wir befinden uns in der Konsole im jeweilgen Verzeichnis und haben hier "node-sass" lokal installiert vorliegen.

Kopieren Sie sich nun Ihre .scss Datei in dieses Verzeichnis.
Entsprechend der Doku [1] reicht die Angabe von z.B.:

npx node-sass input.scss output.css --output-style expanded

Sie erhalten nun eine gerenderte .css Datei im Verzeichnis. Fertig!

Sie möchten lieber mit Verzeichnissen arbeiten?
Erstellen Sie ein Verzeichnis "scss" und kopieren die .scss dort hinein.
Erstellen Sie ein Verzeichnis "css".

Geben Sie ein:

npx node-sass scss -o css --recursive --output-style expanded
oder
npx node-sass scss -o css --recursive --output-style compressed

Checken Sie Ihr "css" Verzeichnis. Fertig!

Bequem - Der watch Modus
Geben Sie ein:

npx node-sass scss -o css --recursive --output-style expanded --watch

Ändern Sie etwas in Ihrer .scss Datei und speichern diese.

Solange der watch Modus aktiv ist, wird nach jeder Änderung sofort die .css Datei neu generiert
( Beenden Sie den watch Modus in der Konsole mit CTRL-C).


[1] https://github.com/sass/node-sass#co...line-interface

[Franko]

Die obigen Beispiele immer in der Konsole einzugeben ist eine Möglichkeit.
Man kann sich diese auch als node-scripts [1,2,3,4] in der package.json eintragen - z.B. ala

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "sass": "node-sass scss -o css --recursive ",
    "dev:sass": "npm run sass -- --output-style expanded --source-map true ",
    "predev:sass:watch": "npm run dev:sass",
    "dev:sass:watch": "npm run dev:sass -- --watch",
    "prod:sass": "npm run sass -- --output-style compressed"    
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "node-sass": "^4.12.0"
  }
}

Die Aufrufe in der Konsole wären dann:

npm run dev:sass
oder
npm run prod:sass
oder 
npm run dev:sass:watch

Eine Möglichkeit - Selbstverständlich könnten Sie auch z.B. Gulp hierzu einsetzen ...


[1] https://docs.npmjs.com/misc/scripts
[2] https://css-tricks.com/why-npm-scripts/
[3] https://www.keithcirkel.co.uk/how-to...-a-build-tool/
[4] https://www.freecodecamp.org/news/in...-1dbb2ae01633/

[Franko]

Angenommen in einer test.scss Datei steht folgendes ( simplify sample ):

$COL_MAIN_BG: #ffffff;
$COL_MAIN-FG: #666666;

body {
    margin:0;
    padding:0;
    background-color: $COL_MAIN_BG;
    font-family:arial,sans-serif;
    color: $COL_MAIN-FG;
}

Mit sass/scss könnte man dies in kleinere Parts gliedern/aufteilen [1]

• Erstellen Sie sich im Verzeichnis "scss" eine Datei "_variable.scss".
• Kopieren Sie sich lediglich die Sass Variablen in diese Datei.
• Anstelle der Sass Variablen tragen Sie in der test.scss ein: "@import "variable";".

Das wars. Sie könnten hierbei die entsprechenden Partials Dateien in weitere Unterverzeichnisse aufteilen,
oder sich via npm weitere frameworks installieren ( bootstrap, animate.css etc. ) und diese - oder Teile davon - mit der "@import" Anweisung includieren,
oder die für Contao benötigten Styles weiter gliedern in "_news.scss", "_events.scss" usw..

[1] https://sass-lang.com/documentation

[Franko]

Die obigen Beispiele sind unabhängig vom jeweiligen Editor wie Adobe-Brackets, Atom, "Visual Studio Code", whatever.

Starten Sie lediglich den watch Modus auf der Konsole und bearbeiten Sie die .scss Dateien mit dem Editor Ihre Wahl.
Über eine lokale Contao Installation überprüfen Sie das Ergebnis und - wenn final - übertragen die .css Datei auf den Hoster/Server.

Selbstverständlich könnten Sie auch auf bestimmte Möglichkeiten Ihres favorisierten Editors/IDE eingehen/zurückgreifen.

Ein Beispiel: Der kostenfreie "Visual Studio Code" Editor

Nutzen Sie "VSC" benötigt dieser grundsätzlich die "node-Installation" und das "node-sass" Modul [1].

Benutzen Sie in Ihrem Arbeitsverzeichnis die "node-scripts" kann man diese bequem innherhalb des "VSC" aufrufen [2]
( Eine Möglichkeit - oder halt einfach über das "VSC-Terminal" den watch Modus starten ).

Alternativ bietet "VSC" auch seine eigenen Tasks zur Automatisierung. Man könnte also gemäß [1] sich ein Task für sass/scss anlegen.
Entsprechend hätte man dann im aktuellen Arbeitsverzeichnis ein Verzeichnis ".vscode" und darin die "task.json" Datei vorliegen.
Abhängig ob das "node-sass" Modul nun global o. lokal installiert ist könnte man in dieser das entsprechende Kommando über den Eintrag ""command": ..." hinterlegen.

Wie gesagt: Eine Möglichkeit - also "VSC" spezifisch ...

[1] https://code.visualstudio.com/docs/languages/css
[2] http://www.matthiassommer.it/program...k-of-a-button/

[Franko]

Es gibt für fast alles eine Lösung.
Stöbern Sie mal in npmjs.

- https://github.com/imagemin/imagemin bzw.:
- https://github.com/imagemin/imagemin-cli
- https://github.com/svg/svgo
- https://github.com/postcss/postcss
- usw...

[dirksche]

Für den VS Code gibt es noch eine tolle Sass Compiler Erweiterung:
https://marketplace.visualstudio.com...kdey.live-sass
Damit muss man nicht zwingend node.js einsetzen.

[Franko]

Eine schöne "awesome" Übersicht findet Ihr hier:

https://github.com/sindresorhus/awesome-nodejs
https://github.com/tejasrsuthar/Awesome-NodeJS

Was ich immer benutze ist https://github.com/shelljs/shelljs bzw. die entsprechende CLI-Variante: https://github.com/shelljs/shx
Praktisch wenn man seine Konsolen Befehle bzw. node-scripts Plattform übergreifend nutzen möchte:
( z.B. in Windows und in einem Docker Container ).

[Franko]

Wenn Sie eine lokale Contao Installation mit dem Chrome Browser öffnen erreichen Sie die Chrome-DevTools über Eingabe von "F12" oder via Auswahl "Weitere Tools/Entwicklertools".

Im Register "Elements" sehen die den generierten Quellcode - dort im Bereich "Styles" dann die entsprechenden CSS Angaben je Selektor.
Sie könnten jetzt hier CSS Angaben direkt ändern und die Auswirkungen im Frontend beobachten.

Weiterhin finden Sie hier auch den Link zum entsprechenden Eintrag in der jeweiligen .css Datei. Klicken Sie darauf und Sie befinden sich im Register "Sources".
Die jeweilige .css Datei ist geöffnet und Sie könnten auch hier dann Ihre Änderungen setzen/verfolgen.

Falls die CSS Ausgaben hier minimiert angezeigt werden sollten:
Klicken Sie unten auf "{}" - Chrome bietet Ihnen dann eine besser lesbare "expanded" Ansicht.

All Ihre hier gemachten Änderungen sind flüchtig!

Sie müßten demnach diese kopieren und dann lokal wieder an entsprechender Stelle speichern.
Wenn Sie die .css via .scss generiert haben ist es dann u.U mühsam die korrekte Stelle zur Änderung nachzuvollziehen.

Sie möchten direkt Ihre .scss Daten in Chrome bearbeiten/testen/speichern?

Sie benötigen hierzu "Sass Source Maps" und die Bereitstellung von Chrome "Workspaces" [1,2].
Über diese Vorgehensweise könnte man innerhalb der Chrome-DevTools arbeiten - ohne externen Editor.
Eine weitere Alternative ...

Voraussetzungen:

• Sie haben eine lokale Contao Installation
• Sie haben eine externe .css in "Themes/Seitenlayouts" eingebunden
• Die .css wird via .scss generiert
• Deaktivieren Sie im Contao BE den client/server Cache
• WICHTIG!: DEAKTIVIEREN Sie unter "Themes/Seitenlayouts" die Option "Skripte zusammenfassen"!

Die "Sass Source-Maps" erzeugen/nutzen.

Im obigen Beitrag "Node-Scripts als Task Runner"
sehen Sie, das hier bereits die Source-Map erzeugt wird.
Mit Angabe der Option: --source-map true [3].

Neben der generierten .css Datei finden Sie im Anschluß auch eine entsprechende ".map" Datei vor.

Wichtig:
In den Chrome-DevTools müssen Sie die den "Source-Map" support evtl. aktivieren.

Rufen Sie in den DevTools die Einstellungen auf ( via Menü oder F1 ).
Im Bereich "Preferences" aktivieren/überprüfen Sie den Eintrag "Enable CSS source maps" und starten die DevTools gegebenenfalls erneut.

Wenn Sie jetzt das Contao FE aufrufen sehen Sie in "Elements/Styles" nicht mehr den .css Pfad,
sondern gleich die korrespondierende Angabe aus der .scss Datei UND möglichen Partials!

Ihre .scss in den Chrome-DevTools direkt ändern und speichern.

Step 1:
Aktivieren Sie jetzt den Sass watch Modus auf der Konsole ( s.o. ).
Bei jeder Änderung Ihrer .scss Datei und/oder Partial Datei wird also sofort die .css neu erstellt.

Step 2:
Jetzt müssen Sie den Chrome-DevTools nur noch erlauben/ermöglichen auf diese lokalen Verzeichnisse zuzugreifen.

Wechseln Sie in den DevTools in das Register "Sources".
Im Bereich "Filesystem" finden Sie einen Eintrag "+ Add folder to workspace".

Klicken Sie darauf und geben das übergeordnete Verzeichnis an über das sowohl die "scss" und "css" Verzeichnisse erreichbar sind - z.B. Contao "files".
Chrome fragt dann nochmals eine Bestätigung des Zugriffs an. Bestätigen Sie diese.

• Wählen Sie unter "Elements/Styles" einen Selektor aus und ändern das Style.
• Im Browser sehen Sie Ihre Änderungen.
• Wählen Sie unter "Elements/Styles" einen Selektor und klicken auf den angegebenen .scss ( o. Partial- ) Pfad.
• Im Bereich "Sources/Filesystem" machen Sie Ihre Änderung in der jeweils geöffneten Datei und speichern diese mit CTRL-S.
• Im Browser sehen Sie Ihre Änderungen.
• Im Terminal sollten Sie sehen das Ihre Änderung erkannt wurde ( die .scss gespeichert ) und eine neue .css erstellt wurde

[1] https://www.sitepoint.com/using-sour...g-sass-chrome/
[2] https://thoughtbot.com/blog/sass-sou...s-chrome-magic
[3] https://github.com/sass/node-sass#co...line-interface