SASS - Umfangreiches CSS ganz einfach

1 | 24796 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "SASS - Umfangreiches CSS ganz einfach" mit Ihrem Wissen!

Anzeige Hier werben

SASS steht für Syntactically Awesome Stylesheets was wiederum für eine Meta-Sprache steht die man, wenn sie einmal verstanden und eingesetzt wurde, nicht mehr hergeben will.

Was ist SASS?

SASS ist eine Meta-Sprache von CSS. Die Regeln werden aber anstatt in .css Dateien in .scss Dateien geschrieben. ( Es können auch .sass Dateien mit einer leicht geänderten Syntax verwendet werden, der Einfachheit halber gehen wir hier aber nur auf die .scss Dateien ein.) Aus diesen .scss Dateien werden dann normale .css Dateien generiert.

Der Vorteil von SASS liegt in den zusätzlichen Features die es mit sich bringt, unter anderem Variablen und Mixins. Diese verkleinern den selbst geschrieben Code und ermöglichen vor allem eine saubere und einfache Verwaltung.

Installation

Linux

Ob die Installation unter Linux geklappt hat lässt sich in der Konsole leicht mit einem sass -v testen.

Arch Linux

Unter Arch Linux lässt sich SASS ganz leicht mit dem ruby-sass Paket aus dem AUR installieren.

 
sh
1
yaourt -S ruby-sass
Ubuntu

Die Installation unter Ubuntu ist nicht schwerer:

 
sh
1
sudo apt-get install ruby-full build-essential rubygems sass

Windows

Um SASS unter Windows verwenden zu können wird Ruby benötigt. Ruby kann man einfach von rubyinstaller.org herunterladen.

Nach der Ruby Installation muss man auch unter Windows in die Konsole wechseln. Die Installation von sass wird dann einfach mit gem install sass angestoßen. Von hier ab sind wieder alle Kommandos gleich.

Dateien Beobachten

Mit SASS lassen sich die angelegten .scss Dateien beobachten. Sobald eine Änderung in eine Datei gespeichert wird, lassen sich damit direkt auch die geänderten .css Dateien generieren.

Ein kompletter Ordner mit .scss Dateien wird allgemein wie Folgt beobachtet:

 
sh
1
sass --watch [pfad/zum/quell/ordner]:[pfad/zum/ziel/ordner]

Nehmen wir an wir möchten alle .scss Dateien in unserem arbeiten/projekt/sass Ordner beobachten und bei Änderungen die .css Dateien in den arbeiten/projekt/css generieren:

 
sh
1
sass --watch arbeiten/projekt/sass:arbeiten/projekt/css

Das generierte CSS lässt sich auch direkt mit dem Zusatzparameter --style compressed komprimiert generieren. Komprimierte Dateien verringern die Ladezeit und haben so direkten Einfluss auf die Performance der Webseite.

Features

Dateien importieren

Sass bietet die Möglichkeit Dateien ganz einfach zu importieren. Dies wird vor allem später bei den Mixins wichtig. Die Syntax ist denkbar einfach:

 
css
1
@import "mixins";

Der oben gezeigte Code würde die mixins.scss Datein in die Entsprechende .scss Datei importieren und alle darin bestehenden Variablen oder eben Mixins zur Verfügung stellen.

Über die Importe lassen sich auch gesammelte style.css Dateien generieren. Eine entsprechende sytle.scss könnte wie folgt aussehen:

 
css
1
2
3
4
@import "header";
@import "sidebar";
@import "content";
@import "footer";

Beim Import wird einfach der Inhalt der zu importierenden Datei an dieser Stelle in die entsprechende Datei kopiert. Die Reihenfolge ist hier also wichtig.

Variablen

Variablen in SASS funktionieren wie in jeder anderen Programmiersprache auch. Ein $-Zeichen dient als Indikator für eine Variable. Mit den zugeordneten Werten können sogar Operationen durchgeführt werden.

 
css
1
2
3
4
5
6
7
8
9
$default_blue = #414df0;
$default_margin = 20px;

.box {
    background-color: $default_blue;
    border: 1px solid $default_blue;
    margin-top: $default_margin;
    margin-bottom: $default_margin / 2;
}

Anwendungsmöglichkeiten und die Vorteile liegen hier auf der Hand. Anstatt überall im CSS die gleichen Werte wiederholen zu müssen, kann nun die Variable verwendet werden. Änderungen lassen sich dadurch viele einfacher durchführen.

Nesting

Eines der wichtigsten Features von SASS ist das Nesting. Bei normalen CSS-Regeln werden die unterschiedlichen Identifikatoren der Hierarchie nach hintereinander aufgezählt um ein Element eindeutig zu Identifizieren. Bei SASS werden die Identifikatoren ineinander geschachtelt und ermöglichen damit ein saubereres arbeiten.

CSS SASS
 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#page {
/* Code */
}

#page .wrapper {
/* Code */
}

#page .wrapper .list {
/* Code */
}

#page .wrapper .list .item {
/* Code */
}

#page .wrapper .list .item a {
color: #CCCCCC;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}

#page .wrapper .list .item a:hover {
color: #888888;
}

/* 271 Zeichen */
 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#page {
  /* Code */
  .wrapper {
    /* Code */
    .list {
      /* Code */
      .item {
        /* Code */
        a {
          color: #CCCCCC;
          text-decoration: none;
          font: {
            weight: bold;
            size: 20px;
          }
          &:hover {
            color: #888888; 
          }
        }
      }
    }
  }
}

/* 172 Zeichen */

Wie aus dem Beispiel ersichtlich lassen sich auch Metaklassen wie :hover direkt mit einem vorangestellten & verschachteln. Hinter dem & können auch zusätzliche Klassen wie &.active stehen.

Per Doppelpunkt lassen sich auch einzelne Eigenschaften verschachteln wie hier beim font-weight und font-size geschehen.

Bereits in diesem kurzen Beispiel konnten wir mit der Verschachtelung von SASS ca. 100 Zeichen sparen.

Mixins

Mixins dienen der Vereinfachung von sich wiederholendem Code. Einmal generierte Mixins lassen sich über ein @include überall im Code anwenden. Der Vorteil beim Einpflegen von Änderungen und Updates liegt hier direkt auf der Hand.

 
css
1
2
3
4
5
6
7
8
9
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.box {
    @include border-radius(4px);
}

Auch hier wird ziemlich schnell klar warum das Mixin einen riesigen Vorteil zum normalen CSS bietet. Während ohne SASS bei jedem Element mit Border-Radius wieder alle drei Zeilen gesondert eingegeben und gepflegt werden müssten (Änderung von 4 auf 5 Pixel gefällig?), lässt sich die Eingabe per Mixin auf nur eine Zeile reduzieren.

Einmal geschriebene Mixins lassen sich natürlich über mehrere Projekte hinweg verwenden. Ein gutes Vorgehen ist hier, eine eigene mixins.scss anzulegen und diese beim erstellen von neuen .scss Dateien direkt immer zu importieren. Da mixins kein CSS generieren ist das Problemlos und führt nicht zu dupliziertem Code.

Auf Github lassen sich außerdem schon einige gute Mixin Bibliotheken finden die einen Großteil der benötigen Mixins abdecken.

Funktionen

SASS bringt einige hilfreiche Funktionen mit die hier eingesehen werden können.

 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
$link_color: #CCCCCC;

.box {
  a {
    color: $link_color;
    &:hover {
      color: darken($link_color, 10%);
    }
  }
}

Im Angegebenen Beispiel wird die darken($color, $amount) Funktion verwendet um einen Link beim Hover um 10% abzudunkeln.

Fazit

Wer einmal mit SASS angefangen hat möchte nicht mehr zurück zu normalem CSS gehen. Warum sollte man auch, SASS bietet so viele Möglichkeiten das Arbeiten mit CSS sauberer, einfacher und schneller zu machen. Zurück zu normalen CSS zu gehen wäre einfach nur vorsätzliche Zeitverschwendung.

Weitere Informationen und eine ausführliche Übersicht über alle SASS Funktionen finden sich in der offiziellen SASS Dokumentation.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher hat 1 Person an der Seite "SASS - Umfangreiches CSS ganz einfach" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "SASS - Umfangreiches CSS ganz einfach" hier bearbeiten.

Mitarbeiter