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
No Comment

Leave a Reply

Der Countdown läuft! AC Kickoff 2018!

Ab morgen gibt es 1€ extra pro Lead*!
Jetzt schnell noch Kampagnen anpassen: https://t.co/gRyoFvvLUN

Mehr Infos gibt es hier: https://t.co/x1l5EpfZRG

*Lead = Double Opt In

AC Kickoff 2018: Amateurcommunity PPL + Revshare stornofrei!
Mehr erfahren -> https://t.co/MPlOex9UU5

Good things come to those who wait – And you have clearly waited enough for the shiny new Webmasterchannel! 🤩🤩🤩

Check out all about it on the blog.
https://t.co/sEK2JWViMM

And because we are working on our own page and the #SEO on it atm - have some cool #SeoTips ! 👌

Magazin

RELATED

  • AC Kickoff 2018 startet morgen!

    Der Countdown läuft! AC Kickoff 2018 startet morgen! Jetzt Bonus PPL + Revshare stornofrei auf Amateurcommunity sichern! Ab morgen startet auf Campartner.com die „AC Kickoff 2018“ Aktion.
Für den gesamten...
  • Alles neu im Webmasterchannel

    Es muss nicht immer der Mai sein, der alles neu macht. Auch der November kann dafür herhalten. Das beweisen wir Euch eindrucksvoll gleich doppelt und dreifach!...
  • Google Update: Hilfe nötig?

    Im März dieses Jahres führte Google eines seiner vielen Updates durch, dass mal wieder die Ranking-Kriterien überarbeitete. Im Gegensatz zu vielen anderen vorherigen Neuerungen, waren die Folgen direkt und...
  • HOLY GRAIL OF TRAFFIC: IS THE SEARCH WORTH THE WHILE?

    Istvan Gergley ist bei Digital Performance in Berlin für Media Buying zuständig, folglich hat hat er jede Menge Erfahrung und Kenntnisse auf diesem Gebiet – die er hier mit...