Was ist SASS?

SASS (Syntactically Awesome Stylesheets) ist ein präprozessorisches Stylesheet-System, das CSS (Cascading Style Sheets) erweitert. Es macht das Schreiben von CSS effizienter, strukturierter und leichter zu warten. Mit SASS können Entwickler komplexe Styles einfacher organisieren und wiederverwenden.

Geschrieben wird heute meist ein *.scss (Sassy CSS)-Dokument. Dieses Stylesheet lässt sich sehr einfach verwalten und ermöglicht es uns bislang nicht verfügbare Funktionen zu nutzen. Mit Hilfe von Sass wird es in ein normales CSS-Dokument umgewandelt (kompiliert, engl. compiled). Dieses normale CSS-Dokument wird dann auf dem Server eingesetzt, da der Browser nur CSS interpretieren kann, nicht aber Sass oder andere Präprozessoren.

• Was ist SASS?
  • Eigenschaften von SASS
    • Variablen
    • Verschachtelung (Nesting)
    • Mixins

Eigenschaften von SASS

Variablen

Mit SASS können Werte wie Farben, Schriftgrößen oder Abstände in Variablen gespeichert werden.

$color-primary: red;
$color-secondary: orange;
$color-dark: black;
$color-light: white;
$font: Gotham, Helvetica, Arial, sans-serif;
$padding-medium: 0.5em;

body {
	background: $color-light;
	color: $color-dark;
	font-family: $font;
}
header {
	background: $color-primary;
	color: $color-light;
	padding: $padding-medium;
}
nav {
	background: $color-secondary;
	color: $color-light;
	padding: $padding-medium;
}

Verschachtelung (Nesting)

SASS erlaubt es, CSS-Regeln verschachtelt zu schreiben, was den Code übersichtlicher macht.

.nav-main {
	ul {
		li {
			float: left;
			margin-right: 1em;
			a {
				color: black;
				text-decoration: none;
			}
		}
	}
}

Mixins

Wiederverwendbarer Code wird in Mixins definiert, die überall aufgerufen werden können.

@mixin headline-style {
	font: {
		family: Arial, sans-serif;
		size: 1.5rem;
	}
	color: blue;
	margin-bottom: 1.5rem;
}

h2 {
	@include headline-style;
}

.search-results h3 {
	@include headline-style;
	font-weight: normal;
}

Wird in Zukunft noch ausführlicher erweitert und beschrieben.