Better CSS by SASS

Seit den Neunzigern hilft CSS dabei das Web zu verschönern. Auch wenn CSS seither immer wieder verbessert und angepasst wurde, gibt es doch einige Unannehmlichkeiten in der alltäglichen Arbeit des Programmierers. Hier kommen Präprozessoren ins Spiel. Sie können dabei helfen, den Workflow zu beschleunigen und das Coden zu vereinfachen.

Dieser Artikel erschien zuerst in der AWMpro #17.

In diesem Artikel möchte ich Dir einen kurzen Überblick über Präprozessoren, am Beispiel von SASS als meist genutzten Präprozessor geben. Neben SASS gibt es noch diverse andere Präprozessoren wie LESS oder Stylus, die mehr oder weniger ähnlich sind.

Sass_main
Präprozessoren automatisieren lästige Aufgaben und vereinfachen zum Beispiel den Umgang mit Farben bzw. immer wieder auftauchenden Attributen. Darüber hinaus bieten sie Dir einen größeren Funktionsumfang und machen so das Arbeiten signifikant effizienter.

Da man sich innerhalb des W3C auf CSS als Standard-Stylesheet-Sprache geeinigt hat, sind aktuelle Browser nicht in der Lage SASS oder andere Präprozessor-Sprachen zu interpretieren. Hieran wird sich in absehbarer Zeit voraussichtlich auch nichts ändern. Deshalb wird ein so genannter Compiler benötigt (z.B. Compass). Dieser übersetzt den SASS-Code in gängiges CSS und schreibt diesen in eine normale CSS-Datei. Dies ermöglicht zum einen das Schreiben des gesamten CSS-Codes in eine einzelne Stylesheet-Datei und zum anderen können andere Personen den geschriebenen Code verstehen und editieren, auch wenn diese SASS als Stylesheet-Sprache nicht beherrschen.

Brainhack_main2

Seit CSS3 hat sich der CSS-Interne Funktionsumfang erheblich ausgeweitet. So sind mittlerweile Animationen, Flexboxen und Shapes verfügbar. Langsam finden auch Funktionen ihren Platz, welche man bereits aus SASS oder anderen Präprozessoren kennt. In naher Zukunft werden so z.B. in CSS standardmäßig Variablen und Verschachtelungen unterstützt werden. Dennoch sind Präprozessoren nach wie vor von Bedeutung und werden dies auch auf lange Sicht bleiben.

Syntax

In SASS kann man mit Verschachtelungen arbeiten. Man kann also Kindelemente ansprechen, indem man dieses einfach innerhalb der geschwungenen Klammern des Elternelements schreibt (siehe Abbildung 1). Dies spart nicht nur Schreibarbeit und somit Zeit, sondern sorgt auch für eine bessere Übersichtlichkeit.

header {
background:
color: red;
image: url(bg.jpg);
size: contain;
position: 50%;
}
nav {
background-color: #ff f;
p {
color: green;
}
}
p {
color: red;
}
}

Abbildung 1

So sind in dem aufgeführten Beispiel zwei P-Elemente, welche unterschiedlich gestylt werden. In CSS muss „header nav p“ ausgeschrieben werden um eben speziell dieses Element anzusprechen, während in SASS einfach das P-Tag in das Nav-Tag geschrieben wird. Es muss weniger getippt werden. Durch seine überlegene Syntax sorgt SASS für eine bessere Übersichtlichkeit und spart Zeit bei der Erstellung und Wartung des Codes.

Variablen

In SASS können Variablen genutzt werden. So können z.B. Farben in Variablen festgelegt werden. Durch verändern der Variable, ist es nun möglich die Farbe global anzupassen. In CSS besteht diese Möglichkeit aktuell noch nicht. Hier müsste jedes Color-Attribut manuell angepasst werden.

$farbe1: #000;
$farbe2: #ff f;
header {
background: {
color: $farbe1;
image: url(bg.jpg);
size: contain;
position: 50%;
}
nav {
background-color: $farbe2;
p {
color: $farbe1;
}
}
p {
color: $farbe2;

Abbildung 2

Der Compiler übersetzt die Variablen in validen CSS-Code. Somit tauchen die in SASS definierten Variablen im CSS-Code nicht auf, können jedoch innerhalb von SASS zur Bearbeitung genutzt werden. Hieraus resultiert auch die im Vorfeld erwähnte Browser Kompatibilität. Bis Variablen in CSS Final sind und diese dann, in der Praxis Fallback-Frei verwendet werden können, werden noch einige Jahre vergehen. In SASS ist dies jetzt schon ohne Probleme und Eventualitäten möglich. Dies ist unter anderem einer der Gründe, weshalb Präprozessoren auch auf lange Sicht ihre Daseinsberechtigung behalten werden.

Mixins

Mixins sind ein mächtiges Werkzeug von SASS. Sie ermöglichen ganze Funktionalitäten zu Standardisieren oder anzupassen. Die Möglichkeiten sind relativ umfangreich. Es bietet sich an, diese zu verwenden um Funktionen in einer kürzeren Schreibweise zusammenzufassen oder Global veränderbar zu machen. So kann man z.B. die Schreibweise, der beiden häufig verwendeten Selektoren :hover und :active in einer kürzeren Schreibweise zusammenzufassen, indem man diese in ein Mixin setzt.

//VARIABLEN
$farbe1: #000;
$farbe2: #ff f;
// MIXINS
@mixin interact {
&:hover, &:active {
@content;
}
}
//ANWEISUNGEN
header {
background: {
color: $farbe1;
image: url(bg.jpg);
size: contain;
position: 50%;
}
nav {
background-color: $farbe2;
p {
color: $farbe1;
}
}
p {
color: $farbe2;
@include interact {
color: $farbe1;
}
}
}

Abbildung 3

Im aufgeführten Beispiel in Abbildung 3 wird ein Mixin erstellt und anschließend aufgerufen. Über @mixin wird ein Mixin erstellt. Darauf folgend wird der Name des Mixins (in diesem Fall „interact“) festgelegt und anschließend die entsprechenden Attribute, in geschwungene Klammern gesetzt. In diesem speziellen Fall will ich das die Attribute jedes Mal individuell gesetzt werden können. Das suggeriere ich durch das @content Attribut. Das Mixin wird dann per @include, und den Namen des Mixins, im P-Selector aufgerufen. Man schreibt die Funktion also einmal und kann diese immer wieder per Shorthand einfügen. Es ist auch möglich Variablen in Mixins zu verwenden oder sogar zu erstellen. Hierdurch ergeben sich wiederum ganz neue Möglichkeiten, welche den Rahmen dieser kurzen Übersicht sprengen würden.

Zusammenfassung

Um eine Stylesheet-Sprache zu lernen muss man sich natürlich mit der jeweiligen Syntax auseinandersetzen. Wer CSS beherrscht wird sich jedoch in anderen Stylesheet-Sprachen egal ob SASS, LESS oder Stylus, schnell zurechtfinden. Präprozessoren dienen der Verbesserung von Arbeitsprozessen, so gewinnt man an Geschwindigkeit, erhält eine Bessere Struktur und kann darüber hinaus Funktionen der Zukunft bereits jetzt nutzen, ohne spezielle Fallbacklösungen definieren zu müssen.

Categories
Know-HowMagazineNewsTutorialsWeb-Tech
mm

Redaktion at WebmasterChannel.com

Warnung vor Datenlecks: Firefox-Macher planen neue Funktion https://t.co/3jd3kF0Lo5

😮⚠️ Have you heard this already?! #TrafficCaptain #TrafficPartner @GrandSlamMedia #Canada

You've probably been hearing a lot about #NetNeutrality lately.

Let's talk about that.

https://t.co/nSxXcWTFaE

IT-Vorbild Estland: Was wir von der baltischen Republik lernen können https://t.co/J64jl3mgfn

5 Overlooked Features that Will Boost Your Twitter Marketing https://t.co/C4dElXhtRs #SocialMediaMarketing #SMM

#Google home page search box now shows you recent searches by default by @rustybrick https://t.co/3y2Szm7pbW

AWMPRO

RELATED BY