SASS .scss in Contao anwenden

Hi Leute,

beschäftige mich grad mal mit SASS.
In Contao kann man ja SASS-Datein im BA > externe Stylesheet einbinden und Contao macht daraus automatisch den CSS-Code,
ohne dass man dazu sogenannte COMPILER braucht.


Um die Überischt zu behalten möchte ich neben der hauptsächlichen Datei "bildschirm.scss"
mit einer zweiten Datei arbeiten, in der die Farben definiert werden, z.B. "color.scss"

Wie lassen sich nun beide Dateien miteinander verknüpfen, sodaß die Angaben von der color.scss
in der bildschirm.scss genutzt werden können?

Beispiel:

In der color.scss sind folgende Farbangaben:

Code:

---

       
$color-red : #FF0000;
$color-background-blue : #0000FF;

---

Diese Angaben sollen in der bildschirm.scss verwendet werden:

Code:

---

#header {
    background-color: $color-backgrund-blue;
}

---

Wie funktioniert das?
Ich arbeite mit dem Code-Editor von DreamWeaver..

Ich würde mal sagen so (in der bildschirm.scss):

Code:

---

@import 'color';

#header {
    background-color: $color-background-blue;
}

---

Ich verwende zwar less, das wird aber denke ich das selbe Prinzip sein.

Ich hab eine style.less in die alle anderen less Files importiert werden.

Die style.less sieht dann ca so aus:

@import: "color.less";
@import: "bildschirm.less";
@import: "ce_accordion.less";

Und so weiter. Wichtig ist natürlich die Reihenfolge. So das die Variablen als erstes definiert werden. Kannst auch ganz oben eine vars.less importieren.

Grüße

Gesendet von meinem GT-I9301I mit Tapatalk

Zitat:

---

@import 'color';

#header {
background-color: $color-background-blue;
}

---

Das mit dem @import `color`; funktioniert irgendwie nicht.
Oder muß ich da nen Pfad angeben?

Zitat:

---

muß ich da nen Pfad angeben?

---

nein - nur wenn die zu importierende Datei nicht im selben Ordner liegt.

Kannst auch

Code:

---

@import "color";

---

oder

Code:

---

@import "color.scss";

---

schreiben. Sollte alles funktionieren, solange eine Datei color.scss oder _color.scss im selben Verzeichnis liegt.

Wenn man die Datei importiert sollte diese eigentlich

_meineImportDatei.scss

heißen, damit diese nicht einzeln auch noch kompiliert wird.

Auf jeden Fall macht man das normal in scss so. In Contao habe ich das noch nie genutzt.
Ich kompiliere meine scss-Dateien außerhalb von Contao und binde nur das Ergebnis als externe css-Datei ein.

Hallo Zusammen,

ich hänge gerade etwas:
Einerseits mit der Pfad-Struktur und andererseits mit der Benennung:
1) Pfad:
Ich habe folgende beispielhafte Struktur getestet:
/files/<site>/system/layout/

/css

normalizer.css

/scss

layout.scss

colors.scss

Um in der layout.scss die normalizer.css einzubinden, müsste doch eigentlich

Code:

---

@import "../css/normalize.css";

---

funktionieren, oder? Sofern ich mich nicht ständig vertippe, funktioniert aber nur funktioniert folgendes leider auch nicht:

Code:

---

@import "/files/<site>/system/layout/css/normalize.css";

---

2) die Benennung:
um zu verhindern das z.B. die colors.scss kompiliert wird, müsste ich es doch so schreiben:

Code:

---

@import "_colors.css";

---

Dann wird die Datei aber nicht mehr gefunden. Ich müsste die also umbenennen. Mir stellt sich jetzt aber die Frage ob die Benennung als "_colors.scss" den gewünschten Effekt noch mit sich bringt, da der Unterstrich jetzt Teil des Namens geworden ist und nicht mehr als "nicht kompilieren"-Trigger fungiert, oder?

Gibt es eine Möglichkeit zu prüfen welche Dateien alles kompiliert werden? Im Debugger der Browser zeigt er mir auch die importierte .css-Datei an, die importeierte .scss (ohne Unterstrich) allerdings nicht.

---
Aus Interesse:
welche Routinen verwendet contao (4.8.1 in meinem Fall) für die SASS-Kompilierung?
Mir ist hier auch schon ein abweichendes Verhalten aufgefallen. Sollte ich meine Arbeitsweise überdenken oder arbeitet Contao tatschlich anders als der lokale Ruby-Compiller?

Ich danke euch vielmals.
MfG Tobias