Contao-Camp 2024
Ergebnis 1 bis 13 von 13

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

  1. #1
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

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

    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:


    [1] https://community.contao.org/de/show...ner-CSS-Editor
    Geändert von Franko (28.08.2019 um 11:49 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  2. #2
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard Alternative zur Nutzung des Contao "internen Editors" und der "globaler Variablen"

    • 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
    Geändert von Franko (27.08.2019 um 16:09 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  3. #3
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard In Contao scss/less direkt nutzen

    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
    Geändert von Franko (28.08.2019 um 09:34 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  4. #4
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard Die lokale "node" Installation und Installation eines "node Modules" hier "node-sass"

    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:

    Code:
    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:

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

    Code:
    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/
    Geändert von Franko (27.08.2019 um 15:58 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  5. #5
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard Unterschied globale / lokale Installation von node Modulen

    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:

    Code:
    node_modules/.bin/node-sass -v
    erhalten wir daher eine korrekte Versionsangabe.

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

    Code:
    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 :

    Code:
    npm list -g --depth 0
    Eine Übersicht der lokal - im jeweiligen Arbeitsverzeichnis -installierten Module erhält man via :

    Code:
    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
    Geändert von Franko (27.08.2019 um 16:23 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  6. #6
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard Das "node-sass" Modul im Einsatz

    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.:

    Code:
    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:

    Code:
    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:

    Code:
    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
    Geändert von Franko (27.08.2019 um 16:24 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  7. #7
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard Node-Scripts als Task Runner

    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

    Code:
    {
      "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:

    Code:
    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/
    Geändert von Franko (27.08.2019 um 15:57 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  8. #8
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard Aufteilung in separate Dateien - Die Partials

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

    Code:
    $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
    Geändert von Franko (27.08.2019 um 15:57 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  9. #9
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard In der Praxis

    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/
    Geändert von Franko (27.08.2019 um 16:27 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  10. #10
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard Ausblick:

    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  11. #11
    Contao-Fan Avatar von dirksche
    Registriert seit
    05.08.2009.
    Ort
    Grosslittgen
    Beiträge
    641

    Standard

    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.

  12. #12
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    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 ).
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  13. #13
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard Direkte scss Bearbeitung mit den Chrome DevTools

    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
    Geändert von Franko (28.08.2019 um 13:09 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •