SASS

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;
}
#section.wichtig{
  font-weight: bold;
}

schreiben wir:

#section1{
  background: pink;
  h1{
    color: blue;
  }
  &.wichtig{
    font-weight: bold;
  }
}

Zusatzfunktionen mit Compass

CSS3 - Zusatzfunktionen

Über einen import lädt man diverse von Compass mitgelieferte Mixins (s.u.) zum Thema css3. Über include werden dann Browserübergreifende Statments generiert.

@import "compass/css3";
.layout-1{
  @include box-shadow(2px 2px 1px #999);
}

Erzeugt folgendes CSS

.layout-1 {
  -moz-box-shadow: 2px 2px 1px #999;
  -webkit-box-shadow: 2px 2px 1px #999;
  box-shadow: 2px 2px 1px #999;
}

Browser Reset CSS

Kompass kein Standard Styles für einen Browser Reset erzeugen.

@import "compass/reset";

Components

Auslagern von Teilen geht sehr schön mit Components. Am besten in einen Unterordner. Die Dateinamen beginnen mit einem Unterstrich. Somit weiß Compass, dass es sich um Komponenten handelt. Beim Import läßt man den Unterstrich und das Dattei Suffix (.scss) weg.

components
  - _var.scss
  - _mixin.scss

_var

$color_1: #333;
...

Eingebunden wird es so:

@import "components/var";
@import "components/mixin";

.layout-1{
  color: $color_1;
}
...

Mixins

Mit Mixins kann man einfache Funktionen, ähnlich wie Makros, erzeugen. Man definiert die Funktion mit dem Schlüsselwort @mixin und bindet sie später über include ein. Auch Rechenoperationen sind erlaubt. _mixin.scss

// Definition der Radius Funktion (bzw. des Mixin)
@mixin radius($r){
	-moz-border-radius: $r;
	-webkit-border-radius: $r+2px;
	border-radius: $r;
}

myScss.scss

// Radius Mixin nutzen
...
@include radius(4px);
...

erzeugt:

  -moz-border-radius: 4px;
  -webkit-border-radius: 6px;
  border-radius: 4px;

Sass ohne Konsole

Todo