Ergebnis 1 bis 18 von 18

Thema: Wie am besten mit scss arbeiten?

  1. #1
    Contao-Fan Avatar von tpk
    Registriert seit
    25.02.2011.
    Ort
    48369 Saerbeck
    Beiträge
    771

    Standard Wie am besten mit scss arbeiten?

    Hi,

    ich arbeite mit scss, dazu binde ich app.scss im Seitenlayout ein. In app.scss habe ich aber nur die Imports. Wenn ich nun in den eigentlichen scss-Dateien arbeite, muss ich jedesmal auch die app.scss ändern, wenn ich die Änderungen sehen will, oder? Bisschen lästig.

    Wie macht Ihr das?

  2. #2
    Contao-Nutzer
    Registriert seit
    05.09.2012.
    Ort
    Zwickau
    Beiträge
    200
    Partner-ID
    11375

    Standard

    Ich bin letztens erst auf VS Code umgestiegen und lasse mir die CSS Datei in dem Editor generieren.
    Ich binde nur die generierte CSS in Contao ein und VS Code generiert beim speichern der SCSS Datei immer die CSS Datei automatisch.

  3. #3
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    4.675

    Standard

    Ich binde die scss Dateien direkt im Layout ein und lasse Contao die Umwandlung machen. Viele Wege führen nach Rom
    Angehängte Grafiken Angehängte Grafiken

  4. #4
    Contao-Fan Avatar von tpk
    Registriert seit
    25.02.2011.
    Ort
    48369 Saerbeck
    Beiträge
    771

    Standard

    @Kopfnuss
    Ich verwende Foundation. Im letzten Projekt habe ich mir die css von node generieren lassen, aber diese css ist dann immer riesig gewesen, weil da alles drin war. Außerdem musst Du dann jedesmal die css Datei anfassen und hochladen, oder?

    Deswegen bin ich froh, dass Contao scss kompiliert, aber ich habe mir außerhalb von Contao angewöhnt, versch. Dateien zu verwenden. layout.scss, fonts.scss, menu.scss, etc. Da nervt dann, das die eingebundene Datei sich ändern muss, um eine neue Kompilation anzustoßen. Ich mach jetzt dann erst mal alles wieder in einer Datei.

  5. #5
    Contao-Nutzer
    Registriert seit
    05.09.2012.
    Ort
    Zwickau
    Beiträge
    200
    Partner-ID
    11375

    Standard

    Meinst du riesig wegen der Ladezeit? Die CSS ist natürlich compressed.
    Ansonsten habe ich mehrere SCSS Datein und binde die über @import ein.

    Hochladen macht VS Code automatisch beim speichern und die Daten synchronisert es. Sonst arbeite ich bei der Entwicklung lokal.

  6. #6
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    4.675

    Standard

    Zitat Zitat von tpk Beitrag anzeigen
    Deswegen bin ich froh, dass Contao scss kompiliert, aber ich habe mir außerhalb von Contao angewöhnt, versch. Dateien zu verwenden. layout.scss, fonts.scss, menu.scss, etc. Da nervt dann, das die eingebundene Datei sich ändern muss, um eine neue Kompilation anzustoßen. Ich mach jetzt dann erst mal alles wieder in einer Datei.

    Musst du eigentlich nicht. Ich binde im Layout lediglich die "Haupt SCSS" styles.scss ein. Dort drin sind dann die Unterfiles per @import.

    Code:
    
    @import '_variablen';
    @import '_layout';
    @import 'navigation';
    @import 'formulare';
    
    .....
    mein genereller CSS Code
    Angehängte Grafiken Angehängte Grafiken
    Geändert von Kahmoon (21.04.2021 um 09:58 Uhr)

  7. #7
    Contao-Fan Avatar von tpk
    Registriert seit
    25.02.2011.
    Ort
    48369 Saerbeck
    Beiträge
    771

    Standard

    @Kopfnuss
    Die Foundation Lösung generiert eine CSS Datei mit dem ganzen Framework drin. Das hat zum Arbeiten zu lange gedauert beim Hochladen. Wenn Du Deine Dateien vom Frameworkt trennst, geht das natürlich besser. Du musst aber immer noch das Hochladen auslösen, oder?

    @Kahmoon
    Aber wenn Du was in _layout änderst, musst Du auch was in styles.scss ändern, sonst springt der Compiler in Contao nicht an, oder?

  8. #8
    Contao-Nutzer
    Registriert seit
    05.09.2012.
    Ort
    Zwickau
    Beiträge
    200
    Partner-ID
    11375

    Standard

    Das ist eine Erweiterung für VS Code die ich da nutze, da kann ich einstellen ob die Datei automatisch hochgeladen wird.
    Ich bin auch der Meinung das es bei mir immer die CSS generiert wenn ich etwas in einer SCSS Datei ändere, egal welche.. es wird die CSS immer beim speichern neu geschrieben.

  9. #9
    Alter Contao-Hase Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.242
    Partner-ID
    6122

    Standard

    Ich arbeite nur lokal mit Sass/Scss und binde in Contao die generierte CSS ein.
    Dann hat man auch nicht das Problem bei den Sass/Scss Partials Änderungen ...

    s.a.: https://docs.contao.org/manual/de/an...s-integration/
    Carpe diem ...

  10. #10
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    4.675

    Standard

    Zitat Zitat von tpk Beitrag anzeigen
    @Kahmoon
    Aber wenn Du was in _layout änderst, musst Du auch was in styles.scss ändern, sonst springt der Compiler in Contao nicht an, oder?
    Ohne Cache neu laden und er nimmt die Änderungen sofort. Egal in welcher der Dateien eine Änderung war.

  11. #11
    Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    5.106
    Partner-ID
    7421

    Standard

    Ich arbeite auch zu 90% lokal mit scss und binde nur die resultierende css-Datei ein.
    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen



  12. #12
    Contao-Fan
    Registriert seit
    28.02.2011.
    Beiträge
    383

    Standard welche vs code Erweiterung

    Hallo @Kopfnuss,

    magst du sagen wie die vscode Erweiterung heißt?

    Viele Grüße,
    conter

  13. #13
    Contao-Nutzer
    Registriert seit
    05.09.2012.
    Ort
    Zwickau
    Beiträge
    200
    Partner-ID
    11375

    Standard

    @conter
    klar.. für den Upload benutze ich "ftp-kr".. für Scss die Erweiterung "Live Sass Compiler" und natürlich um alles zu Ordnen "Project Manager"

  14. #14
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    7.638
    User beschenken
    Wunschliste

    Standard

    ich nutze seit einigen Jahren https://prepros.io/ - der überwacht auch die Ordner/Dateien auf Veränderungen, minimiert auf Wunsch und - was oft fehlt - erstellt eine .map

  15. #15
    Contao-Nutzer Avatar von mdoll
    Registriert seit
    25.06.2009.
    Ort
    Wietze
    Beiträge
    245

    Standard

    Zitat Zitat von tpk Beitrag anzeigen
    @Kopfnuss
    Die Foundation Lösung generiert eine CSS Datei mit dem ganzen Framework drin.
    Hast Du in der app.scss alles auskommentiert, was Du vom Foundation Framework nicht benötigst? Das wirkt sich erheblich auf die Größe des generierten CSS aus.

    Gruß
    Mathias
    “Ah," said Mr Pin. "Right. I remember. You are concerned citizens." He knew about concerned citizens. Wherever they were, they all spoke the same private language, where 'traditional values' meant 'hang someone'.”
    ― Terry Pratchett, The Truth

  16. #16
    Alter Contao-Hase Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.242
    Partner-ID
    6122

    Standard

    Zitat Zitat von zonky Beitrag anzeigen
    ich nutze seit einigen Jahren https://prepros.io/ - der überwacht auch die Ordner/Dateien auf Veränderungen, minimiert auf Wunsch und - was oft fehlt - erstellt eine .map
    Alternative:
    Ich benutze lokal "Dart Sass" (über node.js) und für die tasks dann npm scripts (auch mit möglichen watch task/soucre-maps) ...

    s.a.: https://community.contao.org/de/show...sass-scss-less
    Carpe diem ...

  17. #17
    Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.074

    Standard

    Ich hatte die Tage mit der Erweiterung [erdmannfreunde/euf_nutshell] von Dennis gearbeitet und hatte hierzu auch die [erdmannfreunde/theme-toolbox] mit installiert, die genau dieses Problem behebt.
    Aktiviert man in der Entwicklungsphase die toolbox wird der Cache bei jedem Seitenaufruf gelöscht - wichtig ist hier wohl, dass dies nach getaner Arbeit wieder deaktiviert wird, sodass es zu keinen Performanceproblemen kommt.
    Grüsse
    Bernhard


  18. #18
    Contao-Nutzer
    Registriert seit
    09.09.2009.
    Beiträge
    31

    Standard

    Ich entwickel lokal und nutze die File Watcher in Webstorm/PHPStorm, um mir über Dart Sass eine css-Datei generieren zu lassen. (Von Dart Sass gibt es übrigens auch Binaries, die man sich nur in den Path legen muss.) Contao habe ich dann über einen Browsersync-Proxy eingebunden, so dass Änderungen instant im Browser angezeigt werden.

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
  •