[gelöst] Sass, Compass und Sasson Grid Theming
Eingetragen von reggaefish (190)am 19.03.2015 - 11:50 Uhr in
Liebe Drupal Gemeinde,
bevor ich noch 2 Tage verzweifle...
Ich habe eine neue D7 Installation, lokal, Compass läuft, Sasson Theme ist installiert.
ändere ich in den .scss dateien css-relevante Dinge, wie z.B. Farben usw., werden die einwandfrei compiliert und verwendet, ändere ich aber in der _settings.scss die Anzahl der Columns, tut sich gar nix.
Per default ist ein 8 Colums 960 grid eingestellt, ich würde das gern auf ein 3 Colums 1080 ändern...
Hat jemand eine Ahnung wie gas geht?! ;-)
Tausend dank schonmal und grüße
- Anmelden oder Registrieren um Kommentare zu schreiben
Wie soll denn die Umsetzung
am 19.03.2015 - 13:11 Uhr
Wie soll denn die Umsetzung von Sass nach CSS Deiner Meinung nach geschehen? Ich habe Compass auf dem lokalen System + LiveReload installiert. Dann wird, entsprechend der Konfiguration von LiveReload immer wenn ich eine .scss-Datei speichere diese lokal in eine .css-datei umgewandelt (d.h. diese .css-Datei ist zusätzlich zur .scss-Datei vorhanden). Im Theme wird jetzt nur die .css-Datei über den .info-File des Themes angezogen und alles ist ok. Auf den Server im Internet muß ich dann ebenfalls nur die .css-Datei kopieren. Auf meinem Server ist nämlich Compass gar nicht installiert und selbst wenn, wieso sollte Compass eine neue .scss-datei erkennen und compilieren. Dazu müßte man mittels Shell-Zugang erst entsprechende Dienste aufsetzen.
Ich glaube du hast die Vorgehensweise mit Sass/Compass noch nicht so richtig verstanden.
...ja, das könnte sein
am 19.03.2015 - 13:47 Uhr
...ja, das könnte sein XD
dass aus den scss datien schlussendlich die css wird ist mir klar.
dass ich das alles lokal machen kann, auf dem server aber nicht auch.
Momentan passiert auch alles nur lokal...
Im der _settings.scss steht:
// ############################################# //
// ##### Sasson - Advanced Drupal Theming. ##### //
// ############################################# //
// ---- Layout & Grid settings ----------------------
// Sasson use Susy as the layout system.
// Full Susy docs can be found at:
// http://susydocs.oddbird.net/
// --------------------------------------------------
$settings: (
// ---- Container ---------------------------------
container: 960px,
container-position: center,
// ---- Sidebars ----------------------------------
sidebar-first: 25%,
sidebar-second: 25%,
// ---- Directionality ----------------------------
flow: ltr,
// ---- Grid system -------------------------------
columns: 8,
gutters: 0,
math: fluid,
output: isolate,
global-box-sizing: border-box,
last-flow: to,
// ---- Media Query breakpoints. ------------------
breakpoint-small: 480px,
breakpoint-medium: 767px,
breakpoint-large: 960px
);
Wenn ich dort jetzt auf
// ---- Grid system -------------------------------columns: 10,
ändere wird mir zwar meine css neu compiliert, aber an der anzahl der Spalten ändert sich trotzdem nix, zumindest nicht laut Grid-Overlay, das mit dem Sasson Theme mitkommt...
Irgendwo is noch n denkfehler drin... aber ich find ihn nicht ;-)
Lösung
am 26.03.2015 - 20:50 Uhr
Hallo,
das Problem ist, dass deine Einstellungen im .scss nicht im .css übernommen wird. In der Haupt .scss von deinem sasson-subtheme steht zwar (vermutlich) die Zeile:
@import "settings";aber wenn du in die generierte .css datei guckst wirkt sie sich nicht aus. Das liegt daran, dass sich die settings-Datei auf die css-layout-Dateien von sasson auswirken sollte, die du aber nicht neu generierst. Hier die Lösung, erklärt es auch vllt leichter:
1. kopiere den Ordner \sasson\sass\layout nach \subtheme\sass\layout
2. NUR falls da noch keine _settings-datei ist, packe in diesen layout ordner in deinem subtheme auch die Datei _settings.scss
3. ändere dadrin (in der \subtheme\sass\layout\_settings.scss) was du ändern willst, erstmal zum testen ob es klappt
4. nun kompilierst du entweder alle oder zumindest die scss Datein aus dem layout ordner, die du brauchst. Nutzt du z. B. in den Theme-Einstellungen das Desktop-First layout reicht es, die desktop-first.scss zu einer css Datei zu kompilieren, sodass du nun im Ordner subtheme\stylesheets\layout, z. B. desktop-first.css oder die anderen hast.
5. öffne subtheme.info datei und füge eben diese css Dateien hinzu:
styles[stylesheets/layout/desktop-first.css][options][media] = allUnd fertig. So wird das Layout-css von Sasson mit deinen eigenen Einstellungen generiert.
Achja, es scheint so als wäre das Grid-Bild von Sasson falsch, bei mir zeigt es zumindest immer 8 an, also teste das ganze lieber erstmal indem du die container größe änderst z. B,
container: 500pxNoch mehr und weitere Anleitungen dazu hier:
https://www.drupal.org/node/2322677
und hier unter Quick Start
http://cgit.drupalcode.org/sasson/tree/README.txt
Ist etwas umständlich, wird so aber momentan auch von Sasson so empfohlen.
Hoffe ich konnte dir (noch rechtzeitig) helfen :).
...dann halt so...
am 30.03.2015 - 10:51 Uhr
Hallo zusammen,
Danke für die Tips und Hinweise...
die "settings" wurde importiert... ging aber trotzdem nicht...
schlussendlich bin ich wieder zurück zum Zen Theme, dort sind die Sass-Anlagen (oder wei man das nennt) auch schon vorhanden, so dass ich damit jetzt bestens zurecht komme...
Dort klappt auch alles einwandfrei mit den Spalten usw...
Vielen Dank trotzdem !
Grüße
P.S. wer sich noch nicht mit Sass beschäftigt hat: Machen ! Das lohnt sich ja mal mega !! ...noch nie so schnell CSS programmiert... der absolute Hammer !!