Contao-Camp 2024
Ergebnis 1 bis 25 von 25

Thema: CSS / LESS / SASS ...

  1. #1
    Community-Moderator Avatar von schman
    Registriert seit
    20.06.2009.
    Ort
    Dornbirn
    Beiträge
    3.739
    User beschenken
    Wunschliste

    Standard CSS / LESS / SASS ...

    ... und wie sie alle heißen.

    Mich würde mal interessieren was ihr alle so einsetzt. Bisher bin ich eigentlich immer beim "normalen" CSS geblieben. Jetzt würde ich mir aber gerne auch mal etwas anderes ansehen.
    Wie sieht die Zusammenarbeit zwischen sass bzw less und Contao aus?

    Über Erfahrungen würde ich mich freuen.
    Kein Privat Support via PM.

  2. #2
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.292
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo schman,
    ich beschäftige mich zur Zeit sehr mit Sass bzw. Scss und Compass. Gerade Compass bringt noch mal so ein paar sehr Nützliche Dinge mit (automatisches erstellen von Slices aus mehreren Bildern wird eins erstellt und die Verschiebungen automatisch ins CSS eingetragen).
    Leider baue ich das alles immer noch Lokal und kopiere mir manchmal einfach HTML in eine index.html auf meinem Rechner. Das fertige CSS schubse ich dann hoch...
    In Contao 3.1 geht das dann schon mit einer Erweiterung für theme plus, die dann solche precompiler direkt einbaut und das arbeiten auf dem Server erlaubt. TheTrill will die aber vllt noch für Contao 2.11 fitt machen ^^

    Achja, warum Sass und Compass? Weil Yaml4 das auch nutzt und da ist das sau praktisch, mit automatischer Berechnung von Schriftgröße und Abständen etc. ^^

    Viele Grüße
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  3. #3
    Contao-Nutzer
    Registriert seit
    10.08.2012.
    Beiträge
    11

    Standard

    Ich verwende SASS zusammen mit Compass. Ich habe ein Bundle für Textmate programmiert, dass beim Speichern der scss-Datei automatisch eine css-Datei generiert. Diese css-Datei binde ich dann in das Contao-Layout über die Funktion externe Stylesheets ein.

  4. #4
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.292
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von Comolo Beitrag anzeigen
    Ich verwende SASS zusammen mit Compass. Ich habe ein Bundle für Textmate programmiert, dass beim Speichern der scss-Datei automatisch eine css-Datei generiert. Diese css-Datei binde ich dann in das Contao-Layout über die Funktion externe Stylesheets ein.
    Sowas macht man doch einfach mit 'compass watch' auf der Kommandozeile? Dann werden bei mir immer die passenden CSS Dateien erstellt, sobald ich etwas änder ^^

    Viele Grüße
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  5. #5
    Contao-Fan Avatar von joe
    Registriert seit
    20.06.2009.
    Ort
    Lüneburg
    Beiträge
    687
    User beschenken
    Wunschliste

    Standard

    Wir nutzen cssCrush und haben uns ein eigenes Contao Modul zur Integration gebaut. CssCrush war von allen Varianten, gerade für Teamwork, das unkomplizierteste. Außerdem hat es ein Paar nette extra Features.

    Infos unter: http://the-echoplex.net/csscrush/
    Trainings und Coachings zur Fort und Weiterbildung sowie Beratung in den Bereichen Contao, JavaScript, jQuery, VueJS, React, PHP, NodeJS und vielen weiteren Themen.

    Mehr unter jgreg.dev

    Follow me on Twitter @JoeRayGregory

  6. #6
    Contao-Nutzer Avatar von Lego2013
    Registriert seit
    26.01.2013.
    Ort
    Niedersachsen
    Beiträge
    155

    Standard

    Wir verwenden als Editor Sublime Text 2 und schreiben damit SCSS und nutzen Compass intensiv (und das nicht nur wegen der überragenden Sprite-Verwaltung). Überwacht wird das Ganze von CodeKit (wir arbeiten auf Macs), das u.a. Sass/SCSS und Compass überwacht. Das ginge zwar auch über die Kommandozeile mit "Compass - Watch", aber CodeKit ist einfach komfortabler und kann noch ein bisschen mehr. CodeKit kann übrigens auch Bourbon verwalten, das eine gut Alternative / Ergänzung zu Compass darstellt. Die automatische generierte, komprimierte CSS-Datei wird dann im CSS-Editor von Compass gespeichert oder als externe Datei direkt auf den Server hochgeladen.

    Wir wünschen uns natürlich eine Integration von Sass in Contao und idealerweise auch die Integration von Sublime Text 2. Mal schauen, was passiert.
    Beste Grüße, Leo

    Gotta get up and try try try

  7. #7
    Community-Moderator Avatar von schman
    Registriert seit
    20.06.2009.
    Ort
    Dornbirn
    Beiträge
    3.739
    User beschenken
    Wunschliste

    Standard

    Danke für die Rückmeldungen, jetzt sind schon wieder einige Begriffe gefallen die ich nicht kannte bzw. zwar gehört hatte aber nicht mehr zuordnen konnte
    Ich werde mich mal schlau machen.
    Kein Privat Support via PM.

  8. #8
    Contao-Fan Avatar von Bas
    Registriert seit
    03.12.2009.
    Ort
    Hamburg
    Beiträge
    555

    Standard

    SASS/Compass ... untypischerweise auf Windows.
    Genutzter Editor ist PHPStorm, da lässt sich die Compass-Kompilierung einbinden, so dass ich in Folge keine Kommandozeilen mehr brauche.

  9. #9
    Contao-Fan
    Registriert seit
    27.06.2012.
    Beiträge
    600

    Standard

    Abgesehen von den compass Funktionen ist die Verwendung von less und scss direkt in Contao mit den jeweiligen Erweiterungen möglich. Alternativ zu den sprites kann base64 encoding der Bilder verwendet werden - meiner Meinung nach um einiges praktischer und keine Zusatztools/Programme notwendig.

    Gesendet von meinem GT-I9505 mit Tapatalk 2

  10. #10
    Contao-Nutzer Avatar von cgpro
    Registriert seit
    02.07.2009.
    Ort
    München
    Beiträge
    218
    Partner-ID
    11108
    User beschenken
    Wunschliste

    Standard

    ich find scss in verbindung mit codekit (osx) sehr komfortabel.

  11. #11
    Contao-Nutzer
    Registriert seit
    20.04.2011.
    Beiträge
    76

    Standard scss parser

    Hallo!

    Ich möchte gern das Framework Gumby in Contao integrieren.
    Verwende dazu die SCSS Dateien. Habe eine PHP Parser nicht zum laufen gebracht.

    Meine Frage hat jemand ein Script oder Erweiterung zum Parsen der SCSS Dateien?
    Oder kann mir ein gutes Script sagen?

    mfg
    pressi

  12. #12
    Contao-Nutzer
    Registriert seit
    21.02.2010.
    Beiträge
    38

    Standard

    wo packt ihr in Contao 3 die Sass-ordner hin? in Contao 2 ist ja alles immer in tl_files gelandet. aber bei Contao 3 blicke ich den unterschieden zwischen files und assets noch nicht so richtig. finde dazu auch keine gescheite doku...

  13. #13
    Contao-Fan Avatar von Grossvater
    Registriert seit
    20.02.2013.
    Beiträge
    509

    Standard

    Ich benutz reines css.
    Ich will ja nicht als dummer Bauer daher kommen..
    Klärt mich mal kurz auf: was ist der wirkliche Nutzen von SASS, LESS, SCSS, Compass ?

  14. #14
    Contao-Urgestein
    Registriert seit
    07.04.2010.
    Ort
    Stuttgart
    Beiträge
    2.733
    User beschenken
    Wunschliste

    Standard

    Du kannst rechnen, Schleifen, Funktionen (mixins) schreiben, Selectoren erweitern etc.
    Du hast weniger duplikationen.

    Statt
    Code:
    .navigation__item {
       display: inline-block;
    }
    
    .navigation__item:hover,
    .navigation__item:focus,
    .navigation__item:active,
    .navigation__item.active,
    .navigation__item.trail {
       color: red;
    }
    
    button.active {
       color: red;
    }
    Kannst du
    Code:
    .active {
       color: red;
    }
    
    .navigation__item {
       display: inline-block;
    
       &:hover,
       &:focus,
       &:active,
       &.active,
       &.trail {
          @extend .active;
       }
    }
    Weniger Tipparbeit, gleiches Ergebnis.

  15. #15
    Contao-Nutzer Avatar von Lego2013
    Registriert seit
    26.01.2013.
    Ort
    Niedersachsen
    Beiträge
    155

    Standard

    was ist der wirkliche Nutzen von SASS, LESS, SCSS, Compass
    @Grossvater: Lies mal hier http://sass-lang.com/ und hier http://compass-style.org/. Da wird alles erklärt und es gibt viele anschauliche Beispiele und Tutorials.

    Ich kann Dir aus eigener Erfahrung sagen: Wenn Du mit SCSS (sprich Sass) erstmal angefangen hast, willst Du nicht mehr aufhören und CSS macht wieder Spass. Praktisches Beispiel: Du hast 4 Farben für Deine Site. Die definierst Du in SCSS nur einmal als Variable (z. B. $farbe1:red) und verwendest dann im Code nur noch die Variable (z. B. color:$farbe1). Wenn sich die Farbe irgendwann mal ändert, machst Du die Änderung nur in der Variablen und das war's.

    Übrigens unterscheiden sich Sass und SCSS dadurch, dass Sass die etwas ältere Schreibweise ohne geschweifte Klammern ist und SCSS die modernere Variante eben mit geschweiften Klammern. Welche Du benutzt ist Geschmackssache - Du kannst sogar in einer CSS-Datei mixen.

    Compass ist "nur" eine Sammlung von sogenannten Mixins, die super in SCSS genutzt werden können.
    Beste Grüße, Leo

    Gotta get up and try try try

  16. #16
    Alter Contao-Hase
    Registriert seit
    20.03.2010.
    Ort
    Hannover
    Beiträge
    1.041

    Frage

    Zitat Zitat von Bas Beitrag anzeigen
    SASS/Compass ... untypischerweise auf Windows.
    Genutzter Editor ist PHPStorm, da lässt sich die Compass-Kompilierung einbinden, so dass ich in Folge keine Kommandozeilen mehr brauche.
    [ GELÖST ]
    @BAS: Machst Du die komplette Entwicklungsarbeit local oder lädst Du das kompilierte CSS nach jeder Änderung (via SFTP) auf einen Server ?

    Denn genau an dieser Stelle hakt es bei mir.

    Er lädt bei mir leider nur das scss hoch, jedoch nicht die neu kompilierte CSS-Datei.
    Vielleicht hast Du ja einen Tip !?
    Geändert von Samuell (04.03.2014 um 10:58 Uhr)

  17. #17
    Contao-Fan Avatar von thepixture
    Registriert seit
    24.06.2009.
    Ort
    Dresden
    Beiträge
    536

    Standard

    Ich möchte das Thema gern nochmal aufgreifen, da ich aktuell versuche einen optimalen Workflow mit sass zu erreichen, aber noch ein Problem habe beim umwandeln.

    Aktuell habe ich mich nur mit der in Contao 3.3 integrierten SASS-Funktion beschäftigt. Dazu habe ich die scss-Dateien per FileZilla direkt auf dem Server bearbeitet. Allerdings musste ich dann jedes Mal den Cache für die css/js Dateien leeren, damit ich die Änderungen sehen konnte. Das wollte ich jetzt eben anders lösen.

    Ich verwende folgende Programme:
    Editor: Sublime Text 3 Beta mit installiertem SFTP-Package
    Preprocessor: Prepros 4.2 in der Testversion

    Ich habe zum Test lokal 3 scss dateien angelegt.
    _variables.scss
    HTML-Code:
    // Colors
    $color01: #ff4b00;
    main.scss
    HTML-Code:
    // Variables
    @import "variables";
    
    // Styles
    @import "test";
    test.scss
    HTML-Code:
    .test {
    	color: $color01;
    }
    Die main.css bindet über @import die beiden anderen Dateien ein. In "_variables.scss" hab ich eine Variable zum Test angelegt, die wiederum in der "test.css" verwendet wird.

    Wenn ich jetzt die "test.scss" bearbeite und speicher, bekomme ich von prepros einen Fehler
    Syntax error: Undefined variable: "$color01".
    Wenn ich in der "_variables.scss" den Wert änder und speicher, wird die "main.css" korrekt mit dem geänderten Wert erzeugt. Genauso bei der "main.scss".

    Versteh ich hier was nicht richtig, oder warum klappt das mit der "test.scss" nicht? Ich hab auch schon mit Scout und Koala getestet, aber überall das gleiche Problem.

    Wenigstens werden die erzeugten CSS-Dateien per Monitoring in Sublime Text dann auch automatisch auf den Server gespeichert. Das find ich schon mal super
    Grüße
    thepixture

  18. #18
    Administrator Avatar von hofff
    Registriert seit
    02.06.2011.
    Beiträge
    846
    User beschenken
    Wunschliste

    Standard

    Hallo,

    das kann so nicht funktionieren.

    Dateien mit "_" werden nicht kompiliert. Dateien ohne "_" werden kompiliert. Bei Deinem Fall läuft folgendes ab: _variables.scss wird erstmal ignoriert, weil sie mit einem "_" beginnt. Dann nimmt er sich die main.scss vor. Hier sieht er, dass er die _variables.scss unkompiliert importieren soll, was er auch macht. Somit steht der Inhalt der _variables.scss in der main.scss. Jetzt nimmt er sich die test.scss vor. Er merkt, dass er diese vor dem Import kompilieren soll, weil sie keinen "_" hat. Jetzt kommt es aber zu dem Problem, dass die test.scss von der _variables.scss nichts weiß und somit ist der Fehler nachvollziehbar.

    Um dies zu lösen, musst du entweder die _variables.scss mit in die test.scss importieren oder die test.scss mit einem "_" versehen. Dann klappt es wieder.

    Warum es über Contao klappt, ist eine gute Frage! ^^

    fg
    nicky
    ... alles wird besser!

    Präsident der Contao Association Website/Github | Mitglied der Contao Community Alliance Website/Github

    individuelle Webanwendungen, Erweiterungen und noch viel mehr ... www.hofff.com/Github

  19. #19
    Contao-Fan Avatar von thepixture
    Registriert seit
    24.06.2009.
    Ort
    Dresden
    Beiträge
    536

    Standard

    Ok verstehe. Dann macht Contao das schienbar wirklich anders.

    Jedenfalls geht es jetzt mit dem "_" bei der test.scss.

    Danke
    Grüße
    thepixture

  20. #20
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.060
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Nachdem ich bisher mit Contao meistens mit dem internen CSS-Editor gearbeitet habe, gelegentlich ergänzt durch ein paar externe Stylesheets, überlege ich jetzt auf COMPASS umzusteigen. MacKP hat weiter oben geschrieben
    Leider baue ich das alles immer noch Lokal und kopiere mir manchmal einfach HTML in eine index.html auf meinem Rechner. Das fertige CSS schubse ich dann hoch...
    Mittlerweile unterstützt Contao ja zumindest SASS. In einem anderen Thread heißt es, in Contao 3.3 können manche COMPASS mixins genutzt werden, aber (noch?) nicht alle. Das ist nun schon eine ganze Weile her. Wie sieht denn das nun in Contao 3.4 aus, hat sich da irgendwas geändert?

    Falls nicht, ich habe zum Testen mal SASS und COMPASS auf meinem Webspace installiert und würde ganz gern auch online arbeiten können, ohne CSS "hochschubsen" zu müssen. Damit müsste ich doch bei sinnvoll gesetzten Pfaden für SCSS und CSS in der config.rb die CSS-Dateien automatisch innerhalb meiner Contao-Installation erzeugen lassen und diese dann direkt als externe CSS-Dateien einbinden können, oder sehe ich das falsch?

    Was haltet ihr momentan für die bessere Methode, direkt die SCSS-Dateien in Contao einzubinden oder doch besser die außerhalb von Contao durch COMPASS erzeugten CSS-Dateien? Oder anders formuliert, wie gut ist denn momentan die Unterstützung in Contao?

  21. #21
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.897
    Partner-ID
    10107

    Standard

    Ich denke das ist im Endeffekt Geschmackssache bzw. hängt einfach davon ab, mit welchem Workflow man sich wohler fühlt.

    Ich verwende schon immer externe CSS files in Contao und würde wenn dann direkt SCSS files bearbeiten und hochladen/synchronisieren. Software wie Compass finde ich unnötig - aber das ist einfach die persönliche Einstellung. Ich arbeite lieber pur mit Sublime Text bspw. (aber auch da hätte man die Möglichkeit SCSS automatisch in CSS umwandeln zu lassen, wenn man will).
    Geändert von Spooky (04.03.2015 um 15:45 Uhr)

  22. #22
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.292
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Inzwischen nutze ich selber Compass auch nicht mehr. Eigentlich gibt es für alles in Compass etwas gleichwertiges oder einfacherers...
    Ich bleib allerdings auch immer noch dabei nur das fertige CSS in Contao einzubinden und gut ist. Wenn bei dir eh alles direkt auf dem Server läuft, dann kannst du das auch direkt dort auf Kommandozeile laufen lassen. Dann brauchst du nicht schauen was gerade geht oder nicht, dann kannst eh alles machen.

    Viele Grüße
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  23. #23
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.060
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Danke für eure Meinungen.

    @MacKP: Das macht mich natürlich neugierig. Ich bin ja nicht auf Compass fixiert, sondern eher allgemein auf der Suche nach einer Vereinfachung der CSS-Erstellung. Was wären denn die besseren / einfacheren Alternativen zu Compass? Sowas schaue ich mir natürlich auch gern mal an.

    Ich kann natürlich SASS einfach meine SCSS-Dateien überwachen lassen mit sass watch. Fange gerade mit zwei Relaunches an und möchte das dazu nutzen, mal was neues zu probieren in Sachen CSS.

  24. #24
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.292
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Kannst hier nachlesen was ich nutzen : http://erdmann-freunde.de/css-kurs/t...l#marc-reimann
    (bzw. was ich bald nutze, wenn ich dann endlich mal Zeit habe...)

    Spannend ist z.B.:
    - Autoprefixer (da brauch man dann das meiste von Compass schon gar nicht mehr.. fehlt dann nur noch Sprite Generierung.. aber dafür gibts auch das ein oder andere)

    Viele Grüße
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  25. #25
    Contao-Nutzer
    Registriert seit
    10.08.2012.
    Beiträge
    11

    Standard

    Ich habe eine Erweiterung entwickelt, womit noch besser mit Scss in Contao arbeiten kann.
    Kann ich nur jedem empfehlen

    Siehe: https://community.contao.org/de/show...Theme&p=392061

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
  •