SASS

Siehe auch

SCSS
LESS
SASS vs SCSS vs LESS vs ?
https://gist.github.com/chriseppstein/674726 (Super Übersicht über LESS / SCSS Syntax)

Links

• Sass Dokumentation: http://sass-lang.com/documentation/file.SASS_REFERENCE.html
• https://www.youtube.com/watch?v=GIn6w6u-rPY (ATOM Editor mit SASS Autocompile)
• Sass on the fly https://www.sassmeister.com/
• https://scotch.io/tutorials/getting-started-with-sass (Syntax Tutorial)
• https://medium.com/@jstubblefield7939/getting-started-with-sass-scss-and-nodejs-6f7b4589aaf2 (Basis Kompilieren mit node-js)
• 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

Die Grundidee hinter der Entwicklung von Sass war es, die Arbeit mit CSS einfacher zu machen, aber gleichzeitig auch den Funktionsumfang zu erhöhen. Daher wurden in Sass Klammern sowie Semikolons entfernt.

Kurze Zeit später entstand die SCSS Variante die Klammern wieder einführt und auch normales CSS erlaubt.

Wie alle CSS Präprozessoren erweitert SASS den Funktionsumfang um Variablen, Mixins, Farb und Zahlenberechnungen und Vererbung von Eigenschaften.

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. Viele Editoren unterstützen es von Haus aus (z.B. Koala) oder lassen sich erweitern (z.B. Atom)

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

Installation

Mittlerweile einfach z.B. als Node Package

https://sass-lang.com/install

Auch über Homebrew kann man es installieren.

Zum Teste kann man auch diverse Online tools oder z.B. Scout benutzen.

Hinweis nachfolgend wurde einiges entfernt. Auf dieser Seite stehen nur noch Hinweise wie man recht schnell zum produktiven Einsatz kommt. Alles andere wurde als zu umständlich verworfen.

Atom und Sass

Mein Workflow der Wahl, da Atom auch super mit git und github zusammenarbeitet. Funktioniert super komfortabel. Beim Speichern der .sass oder .scss Datei wird automatisch auch die .css oder/und .min.css Datei gespeichert.

https://www.youtube.com/watch?v=GIn6w6u-rPY
1. SASS über NodeJS global installieren:
npm install node-sass -g
2. In Atom das Package sass-autocompile installieren

Ohne Konsole

Besser aber über Konsole und dann zur Vereinfachung über Editor. https://pagewizz.com/sass-setup-in-5-minuten-ganz-ohne-ruby-installation-32281/

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