[gelöst] 3.3.2 Scss und Compass nutzen - Brainstorming

[Franko]

UPDATE - Contao 3.3.2 Sass und Compass nutzen

- Aktuelle Contao Version installiert
- Theme angelegt und Verzeichnis z.B. "files/themes/Projektname" angelegt
- Dateien in das Verzeichnis kopiert _vars.scss und default.scss
- Nur die default.scss über das Theme Layout eingebunden

_vars.scss:

$background: #ece4d9;
$colored:    #c6ad8d;

default.scss:

@import "vars";

body {
  background-color: $background;
}

Compass liegt in der aktuellen Version im Verzeichnis "vendor/leafo/scssphp-compass/stylesheets".
Damit man Compass nutzen kann dieses Verzeichnis relativ zum eigenen ( Theme ) Pfad inkludieren:

default.scss:

@import "vars";
@import "compass";


body {
  background-color: $background;
}

.ce_text {
  line-height: 1.2em;
  background-color: $colored;
  @include border-radius(6px); //Compass Mixin
}

Conta generiert damit dann folgende CSS Einträge:

body{background-color:#ece4d9;}.ce_text{line-height:1.2em;background-color:#c6ad8d;-webkit-border-radius :6px;-moz-border-radius :6px;-ms-border-radius :6px;-o-border-radius :6px;border-radius :6px;}

Hallo,
ich würde jetzt gerne ab der 3.3.x auf Scss umstellen und dabei auch Compass nutzen.

Wie binde ich aber Compass ein - vorhanden/mitgeliefert ist es ja im Verzeichnis "assets\compass\0.12.6" - komme da aber nicht mit den Pfadangaben der import Anweisungen klar.
Habe jetzt einfach die aktuelle compass Version in mein Theme Verzeichnis unter "files" kopiert ...

- Gibt es dazu bessere Möglichkeiten?
- Wie strukturiert Ihr eure "files\Themes\Project-Name\..." Verzeichnisstruktur im Hinblick auf Sass/Scss u. compass?

Und noch eine Frage - Für ältere Contao Versionen möchte ich weiterhin mit Scss/compass Dateien arbeiten und lediglich die erzeugten CSS Dateien in diesen Contao Versionen heranziehen.
Egal ob auf Kommandozeile o. mit Koala/Scout Apps wie setzte ich die korrekten Pfade für die lokale Umsetzung bzw. dann den Switch für die Produktions-Pfade auf dem Webserver.

Habe den Auszug einer Config hier gefunden: http://www.mediendepot-ruhr.de/sasss...processor.html
Erschließt sich mit nur nicht richtig ...

Für Anregungen dankbar
Frank

[MacKP]

Hallo Franko,
hab gerade von Leo mitbekommen, das es bei Compass noch ein Problem gab.. die Einbindung ist aktuell geändert worden, so das der mehr Compass Befehle kann. Wobei da noch die Frage ist, welche gehen und welche nicht.
Am einfachsten kannst du das Testen, wenn die nächsten Tage ne neue Contao Version raus kommt, die das dann behebt.
Hier der Hotfix -> https://github.com/contao/core/tree/hotfix/3.3.2

Also am besten testest du das danach noch mal durch.

Zu den Pfaden:
Ich hab das so gemacht, das ich im root-Ordner lokal dann ne index.html habe und dann da drinn die Ordner-Struktur dann wie später auch in Contao mit /files/usw.
Die ganzen Unterordner brauche ich nur je nach dem.. Wenn ich Schriftarten lokal einbinde, dann auch den Schriften Ordner etc. Das wird aber dann auch alles lokal mit so einer config.rb angelegt, sobald man einmal mit compass watch die Dateien erzeugen lässt. Dadurch habe ich dann die Ordner passend und brauch die nur noch so hochladen.

Ich hoffe das bringt dich schon mal etwas weiter.

Viele Grüße

[Franko]

Hallo Franko,
hab gerade von Leo mitbekommen, das es bei Compass noch ein Problem gab.. die Einbindung ist aktuell geändert worden, so das der mehr Compass Befehle kann. Wobei da noch die Frage ist, welche gehen und welche nicht.
Am einfachsten kannst du das Testen, wenn die nächsten Tage ne neue Contao Version raus kommt, die das dann behebt.
Hier der Hotfix -> https://github.com/contao/core/tree/hotfix/3.3.2
Viele Grüße

Hi, vielen Dank für die Info - ich finde jetzt hier aber gar keinen compass Ordner mehr vor: https://github.com/contao/core/tree/hotfix/3.3.2/assets

Kannst Du evtl. Deine Folder Struktur für ein Contao Theme anreißen bzw. wie von dort dann auf das compass framework in Contao innerhalb einer .scss importiert wird (Path) ?

Lokal teste ich gerade unter Windows die Koala App bzw. Scout - Scout scheint sehr langsam zu sein.
Eventuell ist es doch hilfreicher über den manuellen Weg des Ruby Installers und einer eigenen config.rb zu gehen ...

Danke
Frank

[MacKP]

Äh.. tschuldige.. da hab ich anscheinend etwas unglücklich ausgedrückt. Leo hat da den Compiler geändert. Die Compass-Dateien selbst bleiben gleich.

Öh.. Folder Struktur für ein Contao Theme.. äh.. mach einfach einen Ordner in files -> layout und da legst du dann deine scss Dateien rein. Die Pfade die du angeben musst müssten eigentlich dann vom Contao root aus gehen -> /assets/compass/0.12.6/ was allerdings gerade nicht so gut funktioniert, da der Compiler das nicht so ganz rafft ^^

Ich selber konnte das aktuell noch nicht testen, da ich mit Projekten beschäftigt bin

Lokal mache ich das einfach direkt auf Konsole.. ich brauch ja nur im Root Ordner (wo die config.rb und die index.html liegt) compass watch eingeben und gut ist. Mehr brauch ich da nicht machen ;-)

Viele Grüße

[Franko]

Äh.. tschuldige.. da hab ich anscheinend etwas unglücklich ausgedrückt. Leo hat da den Compiler geändert. Die Compass-Dateien selbst bleiben gleich.
Öh.. Folder Struktur für ein Contao Theme.. äh.. mach einfach einen Ordner in files -> layout und da legst du dann deine scss Dateien rein. Die Pfade die du angeben musst müssten eigentlich dann vom Contao root aus gehen -> /assets/compass/0.12.6/ was allerdings gerade nicht so gut funktioniert, da der Compiler das nicht so ganz rafft ^^
Viele Grüße

Kein Ding - bin nur etwas verwirrt - da ich dies in Leos Keynote gefunden hatte: https://contao.org/files/conference/2014/keynote/#34
Bin also so vorgegangen und den compass Ordner in mein files\Themes\... Vereichnis kopiert und entsprechend includiert -
Das klappt ja auch.

Nur weiß ich halt nicht ob ich dann einfach immer die aktuellste compass Version nutzen kann bzw. ob der Contao Compiler das dann auch kann ...
Oder anders herum welche compass features werden konkret unterstützt?

Gruß
Frank

[MacKP]

Oder anders herum welche compass features werden konkret unterstützt?

Genau das gillt es noch herauszufinden mit der Contao Version, die dann die nächsten Tage raus kommt...
Das weiß noch keiner so genau, da das anscheinend leider nirgendwo genau dokumentiert ist.

Viele Grüße

[andreasisaak]

Ihr braucht doch gar kein eigenes Compass mehr

https://github.com/contao/core/commi...9b9a27d1780R20

Der Contao Core inkludiert nun eine fremde Library dafür. Und sehen tut man das auf Github deswegen nicht, weil das ganze immer erst zur Veröffentlichung des Builds "compiliert" wird. Man kann mit Contao 3.3 nicht mehr einfach die Version von Github herunterladen und nutzen. Man braucht dafür Composer, da sonst Abhängigkeiten fehlen.

In Contao 3.3.2 wird Compass hier liegen:

/vendor/leafo/scssphp-compass/stylesheets

https://github.com/contao/core/commi...5f1e6fe4acL332

[ciaobello]

Aktuell (3.3.1) sieht es es so aus wenn du SCSS Dateien einbindest:

It implements SCSS 3.2.12. It does not implement the SASS syntax, only the SCSS
syntax.

zu finden hier /vendor/leafo/scssphp/README.md

Ich habe mit der COD und SCSS Files rum gespielt und dass hier dokumentiert:
https://community.contao.org/de/show...-amp-Variablen

Konvertiert habe ich die CSS Files mit > http://css2sass.heroku.com/

[Franko]

Ihr braucht doch gar kein eigenes Compass mehr
Der Contao Core inkludiert nun eine fremde Library dafür. Und sehen tut man das auf Github deswegen nicht, weil das ganze immer erst zur Veröffentlichung des Builds "compiliert" wird. Man kann mit Contao 3.3 nicht mehr einfach die Version von Github herunterladen und nutzen. Man braucht dafür Composer, da sonst Abhängigkeiten fehlen.

Ok - Danke, wieder was gelernt. Dann muß ich zunächst auf die Veröffentlichung der 3.3.2 warten.

Unterstützt wird demnach:
- Scss Version 3.2.12
- Compass Version ???
( https://github.com/contao/core/commi...5f1e6fe4acL332
hier steht 0.12.6 - Was ist das für eine Version ? Unter http://compass-style.org/CHANGELOG/ ist aktuell 0.12.2 )

In Contao 3.3.2 wird Compass hier liegen: /vendor/leafo/scssphp-compass/stylesheets

Sorry - steh dennoch auf der Leiter -
Muß ich demnach das compass framework nicht explizit in meiner eigenen .scss Datei via import Anweisung einbeziehen?
Oder halt doch über

@import "vendor/leafo/scssphp-compass/stylesheets/compass"

bzw.

@import "vendor/leafo/scssphp-compass/stylesheets/compass/css3"


Frank

[andreasisaak]

Unterstützt wird demnach:
- Scss Version 3.2.12
- Compass Version ???
( https://github.com/contao/core/commi...5f1e6fe4acL332
hier steht 0.12.6 - Was ist das für eine Version ? Unter http://compass-style.org/CHANGELOG/ ist aktuell 0.12.2 )

https://github.com/leafo/scssphp-compass

Hier siehst du das es die 0.12.2 ist Woher Leo die 0.12.6 hat, weiß ich nicht. Aber mit Contao 3.3.2 ist alles wieder schön

[Franko]

https://github.com/leafo/scssphp-compass
Hier siehst du das es die 0.12.2 ist

Ok, Super - Dank Dir.
Den Rest ( @import etc. ) werde ich dann testen und hier kommunizieren ...

Frank

[Kahmoon]

Moin,

sorry wenn ich mich hier mal einklinke. Der Vortrag von MacKP auf der Konferenz bezüglich SASS war sehr inspirierend..leider komme ich erst jetzt dazu hier mal rumzuspielen.

Habe ich es richtig verstanden das Contao 3.3.2 jetzt meine .sass Files kompiliert? Binde ich dann im Layout .sass Files ein? Ich würde es gerne vermeiden "zig" Tools (Editor -> Onlinegenerator -> Contao) zu verwenden um am Ende die CSS Datei zu erhalten. Composer möchte ich im ersten Schritt gar nicht nutzen.

VG
Frank

[fabil]

Habe ich es richtig verstanden das Contao 3.3.2 jetzt meine .sass Files kompiliert? Binde ich dann im Layout .sass Files ein? Ich würde es gerne vermeiden "zig" Tools (Editor -> Onlinegenerator -> Contao) zu verwenden um am Ende die CSS Datei zu erhalten.
VG
Frank

Hallo Frank,

Neben CSS kannst du nun auch .scss oder .less-Dateien zum Layout hinzufügen. Diese werden dann bei jeder Dateiänderung neu kompiliert und unter /assets als .css-Datei abgelegt und natürlich im Layout verwendet.

Viele Grüße
Fabi

[Kahmoon]

Genau das wollte ich hören

Danke..dann werden ich mal testen. Hat jemand ne Empfehlung für einen Editor? Dreamweaver scheint ja kein Syntaxhighlightin für sass zu haben. Adobe Edge Code CC?

VG

[fabil]

Danke..dann werden ich mal testen. Hat jemand ne Empfehlung für einen Editor? Dreamweaver scheint ja kein Syntaxhighlightin für sass zu haben. Adobe Edge Code CC?

VG

Ich nutze Sublime Text und das hier: http://sublimetexttips.com/how-to-ad...-sublime-text/

Viele Grüße
Fabi

[Spooky]

Minimiert Contao 3.3 eigentlich nun auch endlich die externen Stylesheets?

[Franko]

Habe ein Update ( Contao 3.3.2 ) im ersten Beitrag hinsichtlich SASS und Compass eingetragen ...

Frank

[Kahmoon]

Also .sass Dateien erkennt er gar nicht erst wenn man sie im Layout einbinden will. Da geht nur .scss. Außerdem dürfen die Dateien nicht mit Unterstrich beginnen.

Dann hätte ich gleich noch eine Frage (Franko ich hoffe ich müll hier dein Topic nicht zu)

Normalerweise würde ich jetzt in meinem scss File die Importbefehle der mixins etc. machen. Wenn ich das mixin jetzt im Layout vor meiner Haupt CSS einbinde gibt´s in Contao eine Fehlermeldung. Der Workflow muss also so sein das man seine Imports in der z.B. main.scss macht und nur noch die eine externe Datei im Contao Layout einbindet?

VG

[Franko]

Da geht nur .scss. Außerdem dürfen die Dateien nicht mit Unterstrich beginnen.

Normalerweise würde ich jetzt in meinem scss File die Importbefehle der mixins etc. machen. Wenn ich das mixin jetzt im Layout vor meiner Haupt CSS einbinde gibt´s in Contao eine Fehlermeldung. Der Workflow muss also so sein das man seine Imports in der z.B. main.scss macht und nur noch die eine externe Datei im Contao Layout einbindet?

VG

Hinsichtlich Mixins: http://thesassway.com/intermediate/l...r-cleaner-code

Die .scss Dateien die mit einem Unterstrich beginnen dienen nur dem @import ( hierbei kann der Unterstrich weggelassen werden ) - Daher diese auch nicht direkt über das Theme Layout einbinden ( siehe auch die Compass Umsetzung ... ).
( Hab die Beispiel _vars.scss im ersten Beitrag hinzugefügt ... )
Frank

[MacKP]

Tach auch,
gestern hab ich noch mal mit Leo darüber reden können.
Das was man machen muss um Compass nutzen zu können ist eigentlich nicht unbedingt der relative Pfad von der scss-Datei (kann man schon machen.. ist aber etwas mühsam). Es reicht eigentlich der Aufruf -> @import "/compass";

Dann: Es geht ja noch nicht alles von Compass. Haben auch rausgefunden was nicht. Hier auf der Seite -> http://compass-style.org/index/functions/ gibt es eine List mit 'Compass Functions'. Davon geht bisher nur 'compact'. Alles andere aus der Liste geht NICHT. D.h. z.B. keine Sprites über die SCSS-PHP Funktion (liegt nicht an Contao). Sowas sollte man dann einfach immer noch lokal machen.

Viele Grüße

[Franko]

Tach auch,
gestern hab ich noch mal mit Leo darüber reden können.
Das was man machen muss um Compass nutzen zu können ist eigentlich nicht unbedingt der relative Pfad von der scss-Datei (kann man schon machen.. ist aber etwas mühsam). Es reicht eigentlich der Aufruf -> @import "/compass";

Dann: Es geht ja noch nicht alles von Compass. Haben auch rausgefunden was nicht. Hier auf der Seite -> http://compass-style.org/index/functions/ gibt es eine List mit 'Compass Functions'. Davon geht bisher nur 'compact'. Alles andere aus der Liste geht NICHT. D.h. z.B. keine Sprites über die SCSS-PHP Funktion (liegt nicht an Contao). Sowas sollte man dann einfach immer noch lokal machen.
Viele Grüße

Super,
Danke für die Infos - funktioniert ...
Habe die Import Deklaration im ersten Beitrag aktualisiert ...

Frank

[MacKP]

Uh.. probier das bitte erst noch mal aus. Ich glaub ich hab ausversehen das / stehen lassen. Das muss soweit ich weiß auch nicht sein xD
Sorry.. noch zu wenig Kaffee gehabt heute...

Viele Grüße

[Franko]

Uh.. probier das bitte erst noch mal aus. Ich glaub ich hab ausversehen das / stehen lassen. Das muss soweit ich weiß auch nicht sein xD
Sorry.. noch zu wenig Kaffee gehabt heute...
Viele Grüße

Yepp - Du hast Recht - getestet und eingetragen ...
Mach für heute Schluß ...

Gruß
Frank