SASS SASS

SASS

Bei der Webseiten-Gestaltung kommen verschiedene Programmiersprachen und Techniken zum Einsatz. Neben HTML (Hypertext Markup Language) spielt CSS (Cascading Style Sheets) eine wichtige Rolle. Mit HTML werden Überschriften und Inhalte beschrieben, während mit CSS Farben, Schriftarten und das Layout gestaltet werden. Die Entwicklung von größeren Style Sheets ist zeitraubend und aufwendig.

Das Werkzeug SASS (Syntactically Awesome Stylesheets) ist eine Meta-Sprache und vereinfacht die Erstellung von Style Sheets deutlich.


SASS Beispiele:

Sass arbeitet mit Variablen, so erleichtert es unheimlich die CSS Codierung, da man Werte global festlegen kann.

Variablen:

z.B.

$maincolor: #ccc;
$fontcolor: #333;
$mainsize: 150px;

in der Umsetzung:

.testcontainer {
    color: $maincolor;
    size: $mainsize;
}



Sollte sich im laufe des Projekts irgendwas an diesen Werten ändern, so reicht es aus, die variablen anzupassen, was sich bei mehreren 100 Zeilen CSS Code sehr zeitsparend auswirkt.

Man kann den Code auch verschachteln. So ist es möglich zusammenhängende CSS Funktionen strukturierter darzustellen.

Verschachteln:

z.B.
Üblicher CSS Code:

a {

    fontsize: 22px;
    fontweight: bold;
    color: #333;
}

a:hover {
    fontsize: 22px;
    fontweight: bold;
    color: #999;
}

 

Mit SASS:

a {
    font {
        size: 22px;
        weight: bold;
    } 
    color: $fontcolor;
    &:hover {
        color: #999;
    font {
        size: 22px;
        weight: bold;
     }
   }    
}

 



Ebenso gibt es hilfreiche Funktionen, die z.B. die Strukturierung der Überschriften um ein vielfaches vereinfacht.

Überschriftenstruktur:

z.B.


$default-size : 1.8em; (legt den Basiswert der Schriftgröße fest)

@function size ($size: 100) {(legt den Zählwert der Schriftgröße fest. 100 = 1.8em)

    @return $default-size * ($size/100);
}

h1  {
    font-size: size(120); (Schriftgröße = 120% des Basiswertes)
    color: $fontcolor;
    margin-bottom: 20px;
}

h2 {
    font-size: size(80); (Schriftgröße = 80% des Basiswertes)
}

h3 {
    font-size: size(80);(Schriftgröße = 80% des Basiswertes)
}

h4 {
  font-size: size(70); (Schriftgröße = 70% des Basiswertes)
}

p {
    font-size: size(50); (Schriftgröße = 50% des Basiswertes)
    margin: 0;
}


Entwicklung und Funktion von SASS

Die Syntactically Awesome Stylesheets wurden vom Programmierer Hampton Catlin entworfen und von der bekannten Auszeichnungssprache YAML (Yet Another Markup Language) stark beeinflusst. Die Weiterentwicklung übernahm Natalie Weizenbaum. Als die erste Version fertiggestellt war, führte Weizenbaum die Entwicklung gemeinsam mit Chris Eppstein fort. Im Anschluss daran wurde das SASS-Script in Form einer einfachen Skriptsprache in die SASS-Dateien implementiert. Die Syntactically Awesome Stylesheets fungieren als ein CSS-Präprozessor und erweitern die Cascading Style Sheets um Schleifen, Variablen und viele weitere Funktionen. Diese zusätzlichen Features vereinfachen die Programmierung von Webseiten in CSS. Zusätzlich zu der kommandozeilenbasierten Compilersoftware, die unter einer MIT-Lizenz für zahlreiche Plattformen verfügbar ist, gibt es weitere Verarbeitungsprogramme.


Installation und Verwendung

Installieren kannst Du die Syntactically Awesome Stylesheets unter UNIX (Linux und Ubuntu) und unter Windows. Damit Du SASS mit dem Microsoft-Betriebssystem verwenden kannst, musst Du zuerst Ruby installieren. Anschließend installierst Du die Syntactically Awesome Stylesheets über die Windows-Konsole. Die meisten Unix-Systeme unterstützen die Programmiersprache Ruby direkt. SASS wird nicht in die .css-Dateien, sondern in eigene .scss-Dateien oder .sass-Dateien geschrieben. Im Anschluss daran werden aus den .scss-Dateien herkömmliche .css-Dateien generiert. SASS unterstützt mittlerweile nicht nur den an YAML angelehnten Syntax, sondern viele SCSS-Syntaxe, die an die klassische CSS-Schreibweise angelehnt sind.


Funktionen und Vorteile

SASS bringt viele zusätzliche Funktionen mit sich. Durch diese wird der selbst geschriebene Code verkleinert und Du profitierst von einer einfachen und sauberen Verwaltung. Mit den Syntactically Awesome Stylesheets kannst Du Dateien einfach importieren und alle angelegten Dateien beobachten.

Die Variablen funktionieren wie in allen anderen Programmiersprachen. Das $-Zeichen fungiert als Indikator. Das Nesting zählt zu den wichtigsten Funktionen. Alle Identifikationen werden stets ineinander geschachtelt und dies erleichtert Dir das Arbeiten. Die Mixins vereinfachen einen sich wiederholenden Code und lassen sich nach einer einmaligen Generierung überall im Programmiercode anwenden. Obwohl Du die Meta-Sprache kostenlos verwenden kannst, wird diese aktiv weiter entwickelt und stetig verbessert. Hast Du eine Zeit lang mit den Syntactically Awesome Stylesheets gearbeitet, wirst Du nicht mehr das klassische CSS verwenden wollen. Dank der vielen unterschiedlichen Möglichkeiten funktioniert das Arbeiten mit den Cascading Style Sheets viel einfacher und schneller.