SASS

Links

• Sass on the fly https://www.sassmeister.com/
• Sass mit node-sass (Node.js) RECOMMENDED
• https://github.com/scout-app/scout-app oder http://scout-app.io/
• http://noeticforce.com/best-sass-tools-for-modern-web-design

Zu Compass

• http://compass-style.org/install/

Scout-App

• http://Scout-App.io
• https://pagewizz.com/sass-setup-in-5-minuten-ganz-ohne-ruby-installation-32281/ (auch eine gute Sass Einführung)

Ü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.

Es gibt gute Erweiterungen die z.B. Mixins (s.u.) liefern oder zusätzliche Funktionalität.

Früher lief es nur unter Ruby unter der Konsole. Heute gibt es z.B. libsass eine C Bibliothek auf die diverse Sass Tools zurückgreifen. Compass 2.0 soll z.B. auch auf libsass zurückgreifen. Auch NodeJS bringt eine eigene Umsetzung. Auch Tools mit grafischer Oberfläche gibt es mitlerweile. Z.B. Scout-App.

Was bringt es

Vorteile:

• Wartbarer Code
• Wiederverwenden von Code
• Übersicht
• Gute Erweiterungen z.B. mit Compass

Nachteile:

• Man wird faul und achtet nicht mehr auf schönen CSS Code
• Abhängigkeit der Webprojekte von weiteren Tools. Z.B. aufpassen bei Änderungen auf dem Server die dann wieder überschrieben werden. Tipp - eine Datei zum Überschreiben die nicht von Sass generiert wird. z.B. custom.css
• Man geht vor allem beim Old-School Ansatz mit Ruby viele Abhängigkeiten ein (rvm, evtl. homebrew, ...) Das kann extrem Zeit kosten bis alles läuft.

• Schneller Start mit der Scout App (Sass und Compass und alle Abhängigen Libs) 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

Ohne Konsole

https://pagewizz.com/sass-setup-in-5-minuten-ganz-ohne-ruby-installation-32281/

Scout App

Hier ist die Frage wie man Ruby Gems nutzen kann. Wahrscheinlich muß man schauen daß man die relevanten Files einfach selbst runterlädt und aufräumt. Ist vielleicht eh im Sinne der Übersichtlichkeit und des geringen Overloads.

New-School

• libsass oder node.js
• gulp-sass (siehe gulp)

Old-School - Ruby based

• Ruby Installieren
  • Siehe Ruby
  • 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

SASS pur

sass --watch projekt/sass

Von nun an wird das „/sass“ Verzeichnis überwacht. Wird an einer Datei mit der Endung .scss oder .sass etwas geändert wird diese automatisch kompiliert und als .css Datei ausgegeben. In unserem Fall werden automtisch zwei Dateien mit den Namen „style1.css“ und „style2.css“ angelegt. Will man die CSS Dateien in ein separaten Unterordner unterbringen gibt man einfach folgendes ein:

sass --watch projekt/sass:projekt/css

Das Verzeichnis VOR dem : gibt die Herkunft der SASS Dateien an (den Input), dass Verzeichnis NACH dem : gibt das Zielverzeichnis für die fertigen CSS Dateien an (den Output).

Mit Compass

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;

Vererbung

Über das Schlüsselwort @extend, kann man Stile vererben.

.error{
  @extend .layout-1; // erbe alle Stile von .layout-1
  color: red;
}

Sass ohne Konsole

Scout-App

https://github.com/scout-app/scout-app

• Nutzt mitlerweile (Sept 2016) node-sass und chokidar (verbessert die watch Funktionalität)
• Unterstützt viele Mixins

@import "compass"; @Igosuki/compass-mixins
@import "bourbon"; @thoughtbot/bourbon
@import "neat"; @thoughtbot/neat
@import "meyer"; @TheJaredWilcurt/meyer-sass
@import "buttons"; @alexwolfe/Buttons

Bootstrap und SASS

Bootstrap wird mit LESS entwickelt, aber es gibt einen offiziellen SASS Port.

Wenn Ruby installiert ist kann man einen bootstrap-sass gem installieren, dann kann man später ganz einfach über Compass, Projekte mit Bootstrap erstellen:

Bootstrap Sass Gem installieren

gem install bootstrap-sass

Bootstrap Sass zu vorhandenem Compass Projekt hinzufügen

compass install bootstrap -r bootstrap-sass

Neues Compass Projekt mit Bootstrap-Sass erstellen (Funktioniert bei mir nicht)

compass create my-new-project -r bootstrap-sass --using bootstrap

Hinweise zu Ruby

Achtung - da Sass unter Ruby nicht besonders performant ist und inzwischen andere Varianten bereitstehen (z.b. libsass) sollte man auf bessere Tools umsteigen.)

Sass und Compass werden als Ruby Gems installiert. Viele Entwickler sagen man soll Gems mit RVM (ein Ruby Version Manager) installieren. Damit kann man mehrere Ruby Versionen verwalten und vermeidet Probleme mit fehlenden Schreibrechten.) Für viele Zwecke ist das aber Overkill schon wieder einen Paketmanager zu installieren, wenn man nur ein paar Sachen braucht. Es gibt auch einfachere Methoden.

Option 1: Weiter Sudo benutzen aber in anderem Ordner. Sudo ist OK wenn Gems global installiert werden dürfen. Allerdings nicht in /usr/bin. Man kann Sie stattdessen in /usr/local/bin speichern. Dort installiert auch homebrew sein Zeug.

Beispiel:

sudo gem install fakes3 -n/usr/local/bin

Gems in /usr/local/bin kann jeder User im System nutzen, wenn der Ordner in der PATH Variable ist.

Option 2: OHNE Sudo im home Verzeichnis

Gems sollen in ~/.gem gespeichert werden und binaries in ~/bin (zu PATH hinzufügen).

gem install fakes3 --user-install -n~/bin

Either way, you can add these parameters to your ~/.gemrc so you don't have to remember them:

gem: -n/usr/local/bin

i.e. echo "gem: -n/usr/local/bin" >> ~/.gemrc

or

gem: --user-install -n~/bin

i.e. echo "gem: --user-install -n~/bin" >> ~/.gemrc

(Tip: You can also throw in --no-document to skip generating Ruby developer documentation.)