Kategorien
SASS: Für CSS wie jQuery für JavaScript
Wolltest du schon immer mal Variablen in deinem CSS-File verwenden und damit rechnen? Oder Funktionen? Dann lies weiter!
Heute möchte ich euch nämlich Sass (“Syntactically Awesome Stylesheets”) vorstellen. Sass ist eine Art Add-On für CSS. Wie jQuery für JavaScript…
Um Sass verwenden zu können, braucht man Ruby um das SCSS-File in ein CSS-File zu “Kompilieren”. Hat man Ruby installiert, kann man auf der Konsole einfach “gem install sass” ausführen, und Sass wird installiert.
Ein Beispiel
Beginnen wir mit einem Beispiel. Zuerst erstellen wir eine HTML-Datei. Nennen wir sie “index.html”:
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sass-Test</title>
<link rel="stylesheet" media="screen" href="style.css">
</head>
<body>
<div class="tst">
<p>Lorem Ipsum dolor sit amet...</p>
<a href="#">Link</a>
<p>Lorem <a href="#">Ipsum</a></p>
</div>
</body>
</html>
Wie man sieht, habe ich die Datei style.css als Stylesheet angegeben. Diese existiert noch nicht, und die werden wir auch nie selbst schreiben. Dies erledigt SASS für uns indem es ein SCSS-File “kompiliert”.
Als nächstes erstellen wir eben jenes SCSS-File und benennen es “style.scss”. Am besten speichern wir es im selben Ordner wie das eben angelegte “index.html”-File.
Öffnen können wir es nun mit einem beliebigen Editor (z.B. Notepad++). Beginnen wir indem wir folgende Zeilen in das SCSS-File einfügen:
$main-color: #66c066;
.tst{
color:$main-color;
}
In der ersten Zeile habe ich die Variabel “main-color” definiert. Ihr habe ich einen Wert zugewiesen, der eine grüne Farbe repräsentiert. Danach habe ich, wie in CSS üblich, der Klasse “tst” eine Farbe zugewiesen. Aber anstatt einen fixen Wert konnte ich die oben definierte Variable einsetzen.
Um das SCSS-File nun zu “kompilieren”, muss man mit der Konsole in das Verzeichnis in dem das SCSS-File liegt wechseln, und dort folgende ausführen:
sass style.scss:style.css
Nun wird die Datei “style.css” automatisch erstellt, solange im SCSS-File keine Fehler vorhanden sind…
Ruft man nun im Browser die “index.html” auf, sieht man einen Text mit grüner Schrift. Ihr könnt nun den Wert der Variable “main-color” ändern und das SCSS-File erneut “kompilieren”. Die Farbe der Schrift wird sich nun dementsprechend ändern…
Verschachtelungen
Verschachtelungen steigern extrem die Lesbarkeit der Files. Nehmen wir als Beispiel folgendes CSS:
.main{
color:red;
width:700px;
}
.main p{
margin:20px;
}
.main p a{
color:blue;
}
Dank SASS können wir dies auch so schreiben:
.main{
color:red;
width:700px;
p{
margin:20px;
a{
color:blue;
}
}
}
Wie man sieht steht der Paragraph (das “p”) im “.main”-Block. Was ich darin definiere bezieht sich also auf alle Paragraphen innerhalb des “.main”-Blockes. Ich finde, das steigert die Lesbarkeit enorm. Auch ist so immer alles “schön zusammen”…
Laut SASS-Homepage ist auch folgendes möglich, habe es aber selbst noch nie ausprobiert:
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}
Wenn man das Selbe in CSS schreiben müsste, müsste man einfach drei mal mehr “font” schreiben:
li {
font-family: serif;
font-weight: bold;
font-size: 1.2em;
}
So hält man auch wieder Sachen die zusammen gehören zusammen. Kann man aber meiner Meinung nach auch gerne weglassen…
Erweitern
Ein weiteres schönes Feature ist das Erweitern von Blöcken mit anderen. Das heisst, dass ich bereits definiertes erneut verwenden kann.
Zur Erklärung beginne ich wieder mit einem Beispiel. Nehmen wir mal folgendes HTML:
<div class="container"> <p>Lorem Ipsum Dolor sit amet</p> <ul> <li>Lorem</li> <li>Ipsum</li> <li>Dedu</li> <li>Amet</li> </ul> </div> <div class="zweiterContainer"> <p>Lorem Ipsum Dolor sit amet</p> <ul> <li>Lorem</li> <li>Ipsum</li> <li>Dedu</li> <li>Amet</li> </ul> </div>
Also zwei Container mit dem selben Inhalt. Dazu schrieb ich folgendes SASS:
.container{
width:200px;
border:1px solid black;
margin:10px;
p {
font-size:30px;
}
ul{
color:gray;
}
}
.zweiterContainer{
@extend .container;
color:red;
}
Ich definiere als erstes den ersten Container. Im Zweiten dann erweitere ich ihn um den ersten, und füge noch die Farbe Rot hinzu.
Der zweite Container sieht nun ausser der roten Farbe exakt gleich aus:
Natürlich hätte ich dem zweiten Containter auch einfach noch zusätzlich die Klasse des ersten geben können. Aber hier geht es ja um das Beispiel, und ich bin mir sicher ihr findet bessere Wege dieses Erweitern einzusetzen.
Mixins
Mit Mixins kann man ganze Blöcke definieren und diese dann an verschiedenen stellen verwenden. Also ähnlich wie erweitern. Nur kann man z.B. noch Argumente mitgeben. Ja, Argumente! Cool, nicht?
Die Mixins erinnern mich stark an Funktionen aus einer Programmiersprache. Man definiert etwas einmal, und kann es dann an verschiedenen stellen verwenden. Das ganze kann man dann noch per Argumente steuern…
Und hier auch wieder ein Beispiel. Zwei Boxen:
<div class="box1"> <p>Box 1</p> </div> <div class="box2"> <p>Box 2</p> </div>
Und das SCSS-File:
@mixin box($width){
border: 1px solid black;
width: $width;
margin-top:20px;
p{
margin:10px;
}
}
.box1{
@include box(200px);
color:red;
}
.box2{
@include box(100px);
color:blue;
}
Wie man sieht erstelle ich ein Mixin “box” mit einem Argument. Darin definiere ich dann eine Box. Als Breite (“width”) verwende ich das Argument, also die Variable, “$width”. Somit kann ich die Breite der Zwei Boxen dann individuell einstellen.
Wie man sieht kann man auch in den Mixins Verschachtelungen verwenden. Dem Paragraphen (“p”) habe ich so ein Margin von 10 Pixeln gegeben.
Danach definiere ich die einzelnen Boxen. Darin inkludiere ich nun das bereits definierte Mixin “box”. Es wird nun also alles was ich im Mixin definiert habe für die Box übernommen.
Danach kann ich die Box natürlich noch weiter anpassen, wie man bei der Farbe (z.B. “color:red;” bei box1) sieht.
Funktionen
In SASS gibt es natürlich auch Funktionen. Eine Liste eben dieser findet ihr hier. Ich werde euch hier nicht alle vorstellen. Ich zeige euch in diesem Abschnitt anhand eines Beispieles die grundsätzliche Verwendung von Funktionen mit der Funktion “lighten“.
Im Beispiel haben wir ein paar verschachtelte Boxen:
<div class="box1"> <div class="box11"></div> <div class="box12"> <div class="box121"></div> </div> </div>
Das SASS sieht so aus:
$main-color: #4d2041;
@mixin box($width, $level){
border: 1px solid black;
width: $width;
min-height:50px;
margin:20px;
background-color:lighten($main-color, $level * 20%);
}
.box1{
@include box(400px, 1);
}
.box11{
@include box(100px, 2);
}
.box12{
@include box(200px, 2);
}
.box121{
@include box(100px, 3);
}
Zuerst definiere ich eine Variable mit der Grundfarbe. Danach erstelle ich ein Mixin damit ich die boxen nicht einzeln definieren muss. Das haben wir ja alles schon weiter oben gesehen.
Das interessante ist ist wie ich die Hintergrundfarbe der Boxen definiert habe. Diese passt sich je nach Level an. Genauer gesagt wird sie heller.
Möglich macht dies die Funktion die ich anstatt einem fixen Wert oder einer Variable bei “background-color” angegeben habe. Das erste Argument ist die Farbe, bei der ich eine Variable eingesetzt habe. Das Zweite ist eine Prozentzahl um die die Farbe aufgehellt werden soll. Hier habe ich einen Fixen Wert mit der Variable $level multipliziert. Die Hintergrundfarbe wird also je nach tiefe der Verschachtelung heller.
Das Resultat sieht dann so aus:
Sehr nützlich. Ich denke hier zum Beispiel an verschachtelte Navigationen…
Achja: Wenn man Ruby beherrscht kann man auch selbst Funktionen definieren…
Schlusswort
Ich hoffe ich habe euch Appetit auf dieses mächtige Werkzeug gemacht. Natürlich habe ich in diesem Artikel nur einen Teil von SASS behandelt. Wer mehr lesen und lernen will kann sich die folgenden Links ansehen:
- Die offizielle Website
- Die offizielle Referenz
- Besonders Spannend: Die Kontrollstrukturen (If-Abfragen, Schleifen, …)
- Compass
