SASS: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
Zeile 22: Zeile 22:
 
** Ruby Updaten falls nötig:
 
** Ruby Updaten falls nötig:
 
  gem update --system
 
  gem update --system
gem ruby --
 
 
** 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