Druckbare Version
... 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.
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
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 ^^Zitat:
Zitat von Comolo
Viele Grüße
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/
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.
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.
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.
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
ich find scss in verbindung mit codekit (osx) sehr komfortabel.
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
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...
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 ?
Du kannst rechnen, Schleifen, Funktionen (mixins) schreiben, Selectoren erweitern etc.
Du hast weniger duplikationen.
Statt
Kannst duCode:.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;
}
Weniger Tipparbeit, gleiches Ergebnis.Code:
.active {
color: red;
}
.navigation__item {
display: inline-block;
&:hover,
&:focus,
&:active,
&.active,
&.trail {
@extend .active;
}
}
@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.Zitat:
was ist der wirkliche Nutzen von SASS, LESS, SCSS, Compass
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.
[ GELÖST ]Zitat:
Zitat von Bas
@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 !?
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
main.scssHTML-Code:// Colors
$color01: #ff4b00;
test.scssHTML-Code:// Variables
@import "variables";
// Styles
@import "test";
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.HTML-Code:.test {
color: $color01;
}
Wenn ich jetzt die "test.scss" bearbeite und speicher, bekomme ich von prepros einen Fehler
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".Zitat:
Syntax error: Undefined variable: "$color01".
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 :)
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
Ok verstehe. Dann macht Contao das schienbar wirklich anders.
Jedenfalls geht es jetzt mit dem "_" bei der test.scss.
Danke :)
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
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?Zitat:
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...
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?
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).
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
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.
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
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