SASS - Syntactically Awesome Style Sheets

| Suchmaschinenoptimierung

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.

SASS - Syntactically Awesome Style Sheets

 

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.

Wie wichtig ist SASS für die richtige Webseitengestaltung? 

Mit Programmiersprachen wie HTML werden Überschriften und Inhalte gestaltet, wohingegen CSS für die Farben, das Layout und die Schriftarten verantwortlich ist. Die Entwicklung von einem passenden Style Sheet (Formatvorlage für Webseiten) kann dementsprechend umständlich und zeitaufwendig ausfallen. Zum Glück für alle Anwender gibt es jedoch das Werkzeug SASS Syntactically Awesome Style Sheets), welches die Erstellung von passenden Style Sheets deutlich erleichtert.

Vorteile von SASS

Nicht nur, dass dieses Werkzeug viele zusätzliche Funktionen mit sich bringt, sondern auch der geschriebene Code kann verkleinert werden und Sie profitieren von einer einfachen und vor allem sauberen Verwaltung. Darüber hinaus ist es Ihnen mit dem Tool möglich, Dateien zu importieren und natürlich auch die ganzen angelegten Dateien zu beobachten. Dies ist sinnvoll, wenn sie eine große Website betreiben, welche immer aktuell sein sollte, und den Wünschen der Kunden entsprechen muss. Auf diese Weise können Sie nicht nur Ihre Besucherzahlen erhöhen, sondern auch Ihre Sichtbarkeit im Internet verbessern. Mehr Verkäufe und daraus resultierende höhere Umsätze sind entsprechend die positive Folge.

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

 

.....

 

Wie können Sie SASS verwenden?

  • Dieses Tool kann auf den Rechner mit UNIX, Linux, Ubuntu oder auch Windows installiert werden. Wichtig bei der Installation auf Windows zu beachten ist, dass SASS Ruby benötigt, um verwendet werden zu können. Sollte anstatt Windows ein Mac genutzt werden, kann dieser Schritt übersprungen werden, da Ruby bei OSX bereits enthalten ist.
     
  • Unter Windows ist es möglich, Ruby mithilfe vom Ruby-Installer herunterladen und installieren zu können. Wichtig bei der Installation ist, dass die Option "Ad Ruby executables to your PATH" aktiviert wurde.
     
  • Im Anschluss müssen Sie dann die Command-Line öffnen (Windows-Taste+R), um hier in der Eingabeaufforderung "gem -v" einzugeben. Nach dem Drücken von Enter sollte Ihnen eine Versionsnummer angezeigt werden.
     
  • Für die Installation vom Compass Gem muss wieder die Eingabeaufforderung geöffnet werden. Hier ist es dann nötig "gem install compass" einzugeben, um den Vorgang zu starten. Unter OSX muss hingegen in der Command-Line die Ziele "sudo gem install compass" eingefügt werden. Ein Druck auf Enter startet dann in beiden Fällen die Installation von Compass.
     
  • Um dann im dritten Schritt SASS-Dateien durch Compass in CSS verwandeln zu können, muss wieder die Command-Line geöffnet werden. In die Zeile sollte dann "compass watch PFAD/ZUM/ORDNER" eingegeben werden. PFAD/ZUM/ORDNER muss dabei durch den Pfad zum SASS ausgetauscht werden. Jetzt werden die jeweiligen CSS-Dateien automatisch generiert, wenn Sie SASS-Dateien ändern.

 

 

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 von Compass 

Online unter compass.kkbox.com kann Compass für Windows, Linux oder OSX heruntergeladen werden. Eine Installation ist in diesem Fall nicht nötig, sondern das Programm kann direkt über das Symbol in der Startleiste geöffnet werden. Hier müssen Sie dann nur noch auf "Watch a Folder" klicken und SASS wählen. Nach dem Klick auf "OK" werden dann zukünftig alle CSS-Dateien automatisch erstellt, wenn Sie eine SASS-Datei verändern.

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 von SASS

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.

Nicht genug? 

Für noch mehr Informationen zum Thema, gibt es hier noch weiteren Input.

 

Zurück