SASS: Unterschied zwischen den Versionen
Aus Wikizone
| Zeile 46: | Zeile 46: | ||
== SASS Features == | == SASS Features == | ||
=== Variablen === | === Variablen === | ||
| − | + | <syntaxhighlight lang="css"> | |
| − | + | $color_1: #333; | |
| − | + | body{ | |
| − | + | color: $color_1 | |
| + | } | ||
| + | </syntaxhighlight> | ||
| + | === Nesting === | ||
| + | Statt | ||
| + | <syntaxhighlight lang="css"> | ||
| + | #section1{ | ||
| + | background: pink; | ||
| + | } | ||
| + | #section1 h1{ | ||
| + | color: blue; | ||
| + | } | ||
| + | </syntaxhighlight> | ||
| + | schreiben wir: | ||
| + | <syntaxhighlight lang="css"> | ||
| + | #section1{ | ||
| + | background: pink; | ||
| + | h1{ | ||
| + | color: blue; | ||
| + | } | ||
| + | } | ||
| + | </syntaxhighlight> | ||
== Sass ohne Konsole == | == Sass ohne Konsole == | ||
Todo | Todo | ||
Version vom 27. September 2016, 16:20 Uhr
Links
- http://compass-style.org/install/
- https://github.com/scout-app/scout-app oder http://scout-app.io/
- http://noeticforce.com/best-sass-tools-for-modern-web-design
Ü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.
Automatisch kompilieren im Watch Mode
Der Compiler kann Dateien überwachen und automatisch kompilieren wenn die Datei sich ändert.
compass watch
SASS Features
Variablen
$color_1: #333;
body{
color: $color_1
}
Nesting
Statt
#section1{
background: pink;
}
#section1 h1{
color: blue;
}
schreiben wir:
#section1{
background: pink;
h1{
color: blue;
}
}
Sass ohne Konsole
Todo
