Teil 1: Setup

HTML + CSS

ist keine Programmierung

...wirklich nicht!

• "Photoshop ohne Oberfläche
• Kann bloß um einiges mehr
• Designs dort erstellen wo sie auch betrachtet werden

Aha... Interessant... Und?

• Auszeichnungssprache
• Attributenbasiert
• Einfache, nicht ändernde Schreibweise
• Es ist immer dasselbe
• Lose the respect

• Keine Logik
• Immer gleicher Aufbau
• keine Dynamik
• keine Funktionen

• Music is the space between the notes
• Zwischen den Klammern - egal
• Die wahre Kunst - Benamung

CSS ist nett, aber:

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

• DRY Prinzip
• Kleine Änderungen können sehr komplex werden
• Analogie Photoshop und verschiedene PSDs

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!

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

Installation

Ausführen

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;
}

• LESS und Stylus erwähnen
• SASS Syntax besser vermeiden, keine Ruby Entwickler

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; }

Aufgabe: Nimmt aus einen eurer Projekte einen Schnipsel und baut es um - Sassmeister.com

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; }

Aufgabe: Bisherige Aufgabe um Variablen erweitern.

Mixins

@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.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; }

Mixin: Mixin zum Projekt hinzufügen. Und einbauen

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

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;
}

Aufabe: Könnt ihr Vererbung auf euer Projekt anwenden?

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;
}

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

• Block-Element-Modifier
• BEM
• MindBEMding

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