SASS: Unterschied zwischen den Versionen
Aus Wikizone
| Zeile 22: | Zeile 22: | ||
** Ruby Updaten falls nötig: | ** Ruby Updaten falls nötig: | ||
gem update --system | gem update --system | ||
| − | |||
** Wenn Homebrew installiert ist (Paketmanager): brew install ruby | ** Wenn Homebrew installiert ist (Paketmanager): brew install ruby | ||
* Compass Framework als Ruby Gem installieren | * Compass Framework als Ruby Gem installieren | ||
Version vom 27. September 2016, 13:30 Uhr
Links
Übersicht
Preprozessor für CSS. Ermöglicht Logische Funktionen zu integrieren und generiert aus mehreren Files und der Logik ein finales CSS File. Gut geeignet wenn man schnell ein Farbschema in einem umfangreichen Stylesheet erstellen möchte, da es auch Variablen kennt. Vorteile:
- Wartbarer Code
- Wieder Verwenden von Code
Nachteile:
- Man wird faul und achtet nicht mehr auf schönen CSS Code
- Schneller Start mit der Scout App (enthält Ruby, Sass und Compass) Hier wird keine weitere Installation benötigt. In der neuen Version (2016) Läuft es ohne Ruby dafür mit NW.js, Node. Aber oft ist es besser die Sache von der Pike anzugehen.
- Ruby wird für SASS benötigt (Test in der Konsole mit ruby -v)
- Ausnahme: Manche Sass Tools bringen Ruby bereits mit. Z.B. Scout welches Compass und Ruby mitbringt.
Quickstart
- Ruby Installieren
- Checken ob Ruby vorhanden:
ruby -v
- Ruby, Sass und Compass installieren (hier findest du eine Anleitung http://compass-style.org/install/). Wenn die Rechte nicht passen immer vorne sudo eingeben um mit Admin Rechten auf der Konsole zu arbeiten.
- Ruby Updaten falls nötig:
gem update --system
- Wenn Homebrew installiert ist (Paketmanager): brew install ruby
- Compass Framework als Ruby Gem installieren
gem install compass gem compass -v
- Ordnerstruktur (hängt von der Sass Konfiguration ab.
- scss Ordner - enthält die Sass Dateien
- css Ordner - enthält css dateien
- config.rb - Einstellungen für den Sass Compiler
- Neues Projekt anlegen
- Im Terminal in Ordner wechseln und z.B.
compass/create/meineProjekt
Erzeugt einen Projekt Ordner mit einer Basis Ordnerstruktur und Dateien
- Projekt kompilieren
- Im Terminal im Projektordner
compass compile
Ausgehend von der Konfigurationsdatei werden die CSS Dateien erzeugt.
Sass ohne Konsole
Todo