Back to blog

Einstieg in SASS

12. Dezember 2014 - Posted in Anleitungen Posted by:

In dieser Einleitung gebe ich anhand einiger Code-Beispiele einen Einstieg in SASS (Syntactically Awesome Stylesheets)

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Ich empfehle jedem, der SASS lernen will, einen Blick in den Guide und die Dokumentation zu werfen.

Die Beispiele, die ich hier zeige, habe ich mit SassMeister erstellt. Dort kann man ganz einfach Sass Code eingeben und sofort sehen, wie dieser in CSS umgewandelt wird. Man kann dort auch HTML schreiben, um den geschriebenen Code zu testen.

Variablen
$variablenname: wert;


(Farb-)Funktionen
Eine komplette Liste der Funktionen findet man hier

Play with this gist on SassMeister.


Verschachtelung
Beim Verschachteln bitte darauf achten, dass ihr nicht mehr als drei Ebenen im resultierenden CSS habt.

Play with this gist on SassMeister.


Verschachtelung (2. Beispiel)

Bei verschachtelten Elementen wird in der Regel ein Leerzeichen zwischen die Selektoren eingefügt. Um dies zu verhindern, muss man vor den gewünschten Selektor ein ‘&’ einfügen. (Stickwort ‘Pseudo-Elemente’ oder ‘Pseudo-Klassen’)

Play with this gist on SassMeister.


Mixins

Eigene Funktionen in SASS

Play with this gist on SassMeister.


extend

CSS-Regeln können ‘vererbt’ und mit eigenen Werten erweitert/überschrieben werden.

Play with this gist on SassMeister.


extend (placeholder)

Placeholder verhalten sich so wie CSS-Regeln, die allerdings nicht im gerenderten CSS vorhanden sind. Placeholder sind nur für @extend gedacht.

Play with this gist on SassMeister.


Operatoren

SASS bietet eine Reihe von Operatoren. siehe Dokumentation

  • Number Operations
  • Color Operations
  • String Operations
  • Boolean Operations
  • List Operations

Play with this gist on SassMeister.


Operatoren (erweitertes Beispiel)

Play with this gist on SassMeister.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>