SASS für Designer

Eine Einführung

Florenz Heldermann / Interface Engineer

@track02

Teil 1: Setup

HTML + CSS

ist keine Programmierung

...wirklich nicht!

Aha... Interessant... Und?

  • Auszeichnungssprache
  • Attributenbasiert
  • Einfache, nicht ändernde Schreibweise
  • Es ist immer dasselbe
  • Lose the respect
CSS ist dass, was zwischen den Klammern steht — Harry Roberts

CSS ist nett, aber:

  • Es fehlen essentielle Features
  • Viel Wiederholung
  • Schwierig zu pflegen / warten
  • Alles wiederholt sich sich
  • Starr und unflexibel
  • ziemlich repetiv

SASS hingegen

  • Erweitertes CSS mit zusätzlichen Features
  • Sauber formatiert
  • Leicht pflegbar
  • Schnell zu erlernen
  • "Don't repeat yourself"-Prinzip

Im Wesentlichen: CSS wie es sein sollte!

Installation

  1. Ruby - vorinstalliert auf OSX und Linux, Rubyinstaller für Windows
  2. Rubygems - vorinstalliert auf OSX und Linux, Download für Windows
  3. Terminal öffnen: sudo gem install sass
  4. Done

Ausführen

  1. Im CSS Ordner eine style.scss erstellen ODER vorhandende style.css in style.scss umbenennen
  2. Im Terminal zu euren CSS Ordner navigieren
  3. sass --watch style.scss:style.css
  4. Done

No Love for the Terminal?

There is an app for that!

SASS und CSS

  • Sass hat zwei Varianten
  • .SASS und .SCSS
  • Nachfolgende Beispiele sind SCSS

// SASS
.klassenname
    display: block
    float: left

// SCSS
.klassenname{
    display: block;
    float: left;
}
                            

TL;DR

  • HTML & CSS ist keine hohe Kunst
  • CSS ist eigentlich ziemlich für'n A****
  • SASS: *Thumbs up*
  • Jede CSS Datei ist bereits eine SCSS Datei
  • Installation mit sudo gem install sass
  • Ausführen mit sass --watch style.scss:style.css
  • Jede Menge GUIs / Apps verfügbar

Teil 2: Grundlegendes

Verschachtelung (Nesting)


ul{
    padding: 0;
    li{
        color: blue;
        a.link{
            text-decoration: none;
            color: black;
        }
    }
    a{
        color: #C0FFEE;
    }
}
                            

ul{
    padding: 0; }
ul li {
    color: blue; }
ul li a.link{
    text-decoration: none;
    color: black; }
ul a {
    color: #C0FFEE; }
                                

Verschachtelung: &-Operator

SCSS:


a.mein-link {
    &:hover{ text-decoration: underline; }
    &:before, &:after{
        content: "—";
    }
    &.active{
        color: #f00;
        &:hover{
            color: black;
        }
    }
}
                

CSS:


a.mein-link:hover{ text-decoration: underline; }
a.mein-link:before, a:hover{ content: ""; }
a.mein-link.active{ color: #f00; }
a.mein-link.active:hover{ color: black; }
    

Achtung

  • Verschachtelung ist sehr praktisch
  • Aber: Übertreibt es nicht!
  • Niemand will:

.module div.inner ul li ul li > a:hover span{ color: red; }
.module div.inner ul li ul li > a:active span{ color: green; }
// etc...
                        
  • Lange Selektoren selten von Vorteil
  • Sinnvoll verschachteln
  • "Muss ich so tief gehen?"

Variablen

  • wiederkehrende Elemente
    • Farben
    • Einheiten (px, em, rem, etc..)
    • Schriften
  • Schnelles Ändern von Eigenschaften möglich
  • Einmal setzen - mehrfach verwenden

$font-main: "Fira Sans", Helvetica, "Comic Sans MS";
$font-head: "Droid Serif", Prestige, sans-serif;
$font-mono: Courier, mono;

$font-size-body: 67,5%;
$font-size-large: 32px;
$font-size-main: 1em;

$prim1: #C0FFEE;
$prim2: #F00BAA;
$prim3: #B00B1E;

body{
    font: $font-size-body $font-main;
    background-color: $prim3;
}
h1,h2,h3{
    font-family: $font-size-large $font-head;
    color: $prim1; }
    

Mixins

  • Mixins helfen wiederkehrende Attribute zu vereinfachen
  • Es können verschiedene CSS Anweisungen in einen Mixin deklariert werden.
  • "Variablen" für ganze CSS Abschnitte
  • Beispiel: Automatische Browser Prefixe, -moz, -webkit, -ms, etc...
  • 
    @mixin mein-mixin{
        .... zeugs ....
    };
    
    @include mein-mixin;
        

    mixins.scss

    
    @mixin inline-block{
        display: inline;
        *zoom: 1;
        display: inline-block;
    }
    
    .mein-element{
        width: 300px;
        @include inline-block;
    }
    
    .mein-anderes-element{
        width: 200px;
        @include inline-block;
    }
        

    style.css

    
    .mein-element{
        width: 300px;
        display: inline;
        *zoom: 1;
        display: inline-block;
    }
    .mein-anderes-element{
        width: 200px;
        display: inline;
        *zoom: 1;
        display: inline-block;
    }
    

    Mixins mit Parameter

  • Mixins können auch Werte beim Aufruf übergeben bekommen
  • Ergebnis: Dynamische Ausgabe im CSS
  • Standardwert trotzdem möglich
  • mixins.scss

    
    
    @mixin border-radius($wert: 5px;){
        -webkit-border-radius: $wert;
        -moz-border-radius: $wert;
        -ms-border-radius: $wert;
        -o-border-radius: $wert;
        border-radius: $wert;
    }
    .element-1{ @include border-radius; }
    .element-2{ @include border-radius(10px); }
        

    style.scss

    
    .element-1{
        -webkit-border-radius: 5px;;
        -moz-border-radius: 5px;;
        -ms-border-radius: 5px;;
        -o-border-radius: 5px;;
        border-radius: 5px;; }
    
    .element-2{
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px; }
        

    Funktionen

    • Sass bietet verschiedene nützliche Funktionen
    • "out of the box
    • Erlaubt Farbmanipulationen und Rechenoperationen
    • Statt eines Farbwertes kann eine Farbfunktion aufgerufen werden
    • Statt eines Zahlenwertes (z.B. 100px) können Rechenoperationen benutzt werden

    Beispiele

    
    // Farbvariable
    $myColor: red;
    // Aufhellen
    $bright: lighten($myColor, 20%);
    // Abdunkeln
    $dark: darken($myColor, 20%);
    // Graustufen
    $grey: greyscale($color)
    // Sättigen & Entsättigen
    $effingYeah: saturate($color, 100%);
    $effingBoring: desaturate($color);
    
    // Funktionen können auch kombiniert werden
    $wtf: transparentize(darken($color, 20%), 0.5);
    
    // Kann auch direkt verwendet werden
    background-color: complement($textfarbe);
                                
    Dokumentation | Live Demo | Visual Guide

    Aufgabe: Variablen einbauen.

    Operatoren

    • Sass bietet einfache mathematische Operatoren
    • +, -, *, /, %
    • Erlaubt dynamisches CSS
    • Ideal für Responsive Layout

    Beispiel

    
    .container { width: 100%; }
    
    article[role="main"] {
      float: left;
      width: 600px / 960px * 100%;
    }
    
    aside[role="complimentary"] {
      float: right;
      width: 300px / 960px * 100%;
    }
                            

    Beispiel: Ausgabe

    
    .container {
      width: 100%;
    }
    
    article[role="main"] {
      float: left;
      width: 62.5%;
    }
    
    aside[role="complimentary"] {
      float: right;
      width: 31.25%;
    }
                                

    Vererbung

    • Vererbung ist wichtiges Prinzip der Programmnierung
    • Es beschreibt die Möglichkeit eine Methode in eine andere einfließen zu lassen und
    • ... blah blah blah blah
    • Wir machen keine Programmierung
    • In Sass beschreibt die Vererbung das Einfließen einer CSS Klasse in eine andere
    • Dies funktioniert mit `@extend`

    Beispiel: Warnfenster

    
    .message { // Die Basisklasse
      border: 1px solid #ccc;
      padding: 10px;
      color: #333;
    }
    .success { // Bei Erfolg,  ...
      @extend .message;
      border-color: green;
    }
    .error { // ...bei Misserfolg.
      @extend .message;
      border-color: red;
    }
    .warning { // ...Immerhin wurden wir gewarnt
      @extend .message;
      border-color: yellow;
    }
                                

    Beispiel: Ausgabe

    
    .message, .success, .error, .warning {
      border: 1px solid #cccccc;
      padding: 10px;
      color: #333;
    }
    
    .success {
      border-color: green;
    }
    
    .error {
      border-color: red;
    }
    
    .warning {
      border-color: yellow;
    }
        

    TL;DR

    • CSS Klassen lassen sich verschachteln
    • Werte können in $variablen gespeichert werden
    • Wiederkehrende Elemente lassen sich mit @mixin's einfügen
    • Ein @mixin kann auch mit Parametern aufgerufen werden
    • Es gibt Mixin-Bibliotheken wie Compass oder Bourbon, die bereits viele Mixins mitbringen
    • Funktionen können viel Arbeit ersparen...
    • ... und für uns rechnen
    • Vererbung ist super

    Teil 3: Erweitertes Grundwissen

    Import / Sass Struktur

    Eine CSS Datei wächst - dieses verhindert Übersicht. Hier kann auch SCSS nicht wirklich helfen

    Jedenfalls nicht wenn man in einer Datei arbeitet

    Sass bietet eine @import Möglichkeit. Mit dieser können Unterdateien in eine Hauptdatei importiert werden. Diese dient dann "Inhaltsverzeichnis"

    Diese Unterdateien werden mit einen Unterstrich gekennzeichnet. Beispiel: _caroussel.scss

    Der Aufruf in der Hauptdatei z.B. style.scss erfolgt dann mit

    
                                     @import "caroussel";
                                

    Beachten: Kein Unterstrich und Dateiendung mehr vorhanden

    Beispiel Aufbau einer style.scss

    
    // Basis CSS - im Unterordner "base"
    @import "base/reset";
    @import "base/variablen";
    @import "base/mixins";
    @import "base/webfonts";
    @import "base/typography";
    
    // Module CSS - im Unterordner "module"
    @import "module/grid";
    @import "module/header";
    @import "module/footer";
    @import "module/navigation";
    @import "module/caroussel";
    // usw.
                                

    Sass beobachtet jede Änderung in einem Unterordner und kompiliert automatische eine neue style.css

    Platzhalter

    • CSS Klassen können mit @extend erweitert werden
    • Die Basisklasse bleibt im CSS
    • Auch wenn Sie nicht benutzt wird
    • Lösung: Platzhalter Klassen

    Beispiel: Warnfenster II

    
    %message { // Die Basisklasse
      border: 1px solid #ccc;
      padding: 10px;
      color: #333;
    }
    .success { // Bei Erfolg,  ...
      @extend %message;
      border-color: green;
    }
    .error { // ...bei Misserfolg.
      @extend %message;
      border-color: red;
    }
    .warning { // ...Immerhin wurden wir gewarnt
      @extend %message;
      border-color: yellow;
    }
                                
    
    .success, .error, .warning {
      border: 1px solid #ccc;
      padding: 10px;
      color: #333;
    }
    
    .success {
      border-color: green;
    }
    
    .error {
      border-color: red;
    }
    
    .warning {
      border-color: yellow;
    }
                                
    • Die Klasse .message existiert nicht mehr
    • Aufruf kann nur mit .error erfolgen
    • Bibliotheken lassen sich so aufbauen

    Media Queries

    • Media Queries lassen sich schnell an einen CSS Modul heften
    • Sass erstellt den Media Query für uns
    
    .modul{
        width: 100%;
        padding: 1em;
        @media screen and (min-width: 480px){
            width: 50%;
            padding: 0;
            float: left;
        }
        @media screen and (min-width: 480px){
            width: 30%;
            padding: 2em;
        }
    }
                                

    Ausgabe

    
    .modul {
        width: 100%;
        padding: 1em;
    }
    @media screen and (min-width: 480px) {
        .modul {
            width: 50%;
            padding: 0;
            float: left;
        }
    }
    @media screen and (min-width: 480px) {
        .modul {
            width: 30%;
            padding: 2em;
        }
    }
                                

    If/Else

    Beispiel: Inline-Block II

    
    $ie7-support
    
    @mixin inline-block{
        @if $ie7-support{
            display: inline;
            *zoom: 1;
            display: inline-block;
        } @else {
            display: inline-block;
        }
    }
    
    @mein-block{
        @include inline-block();
    }
                                

    Ausgabe

    
    // true, wir supporten IE7
    .mein-block{
        display: inline;
        *zoom: 1;
        display: inline-block;
    }
    
    // false, kein Support
    .mein-block{
        display: inline-block;
    }
                                
    Weitere Sass Anweisungen

    OOCSS, SMACSS, BEM

    OOCSS

    • Objekt Orientiertes CSS
    • Abstrakte Form eines Moduls
    • Allgemeine Objekte, stark wiederverwertbar
    • oocss.org

    SMACSS

    • Scalable and Modular Architecture for CSS
    • Gratis eBook
    • Behandelt den Aufbau von großen Projekten
    • Oder Projekte die noch groß werden können

    BEM

    
    .person{}
    .person__hand{}
    .person--female{}
    .person--female__hand{}
    .person__hand--left{}
                                

    Objects in Spaaaaace

    Ein Konzept um Modulares SASS zu schreiben. Hier gehts zum Artikel.

    Fragen?

    Schönes Wochenende