Sass vs. SCSS vs. Less

Die Präprozessor Skriptsprache Sass „Syntactically Awesome Style Sheets“ wurde im Jahr 2006 veröffentlicht. Es existieren zwei verschiedene Syntaxen – also Grammatiken.

Zum einen ist das die originale und geplante Syntax – auch Sass Syntax oder "indented Syntax" genannt, und die im Nachhinein eingeführte Syntax – SCSS „Sassy CSS“. Sass beschränkt sich auf das Einrücken von Elementen und kommt ohne die gewohnten geschweiften Klammern und ohne Semikola aus. Variablen werden durch ein vorangestelltes $-Zeichen deklariert, Mixins durch ein @-Zeichen.

Sass kann entweder zu einer CSS Datei konvertiert oder direkt als .sass Datei clientseitig verwendet werden. Die Konvertierung einer .sass-Datei in eine .css-Datei erfolgt über ein das Terminal.

sass inputfile.scss outputfile.css

Download über Webseite: https://sass-lang.com/

Download über npm: npm install -g sass

Less „Leaner Style Sheets“ wurde im Jahr 2009 veröffentlicht. Der Less-Compiler wurde zunächst mit der Programmiersprache Ruby entwickelt, später mit JavaScript. Im Gegensatz zu Sass werden bei Less Variablen mit einem vorangestellten @-Zeichen angegeben.

Less kann entweder zu einer CSS Datei konvertiert oder direkt als .less Datei clientseitig verwendet werden. Die Konvertierung einer .less-Datei in eine .css-Datei erfolgt über das Terminal.

lessc file.less file.css

Entscheidest du dich für die zweite Methode kannst du dir die benötigten Dateien herunterladen oder diese im HEAD Bereich deiner HTML Datei einbinden.

Download über Webseite: http://lesscss.org/

Download über npm: npm install -g less

$res-size: 100%;
$mycolor: #fa885f;
$spacing: 15px;

.button {
	width: $res-size;
	background-color: $mycolor;
	padding: $spacing;
	margin: $spacing;
	a, p {
		text-decoration: underline;
	}
	&:hover {
		background-color: #fff;
		color: $mycolor;
	}
}

$res-size: 100%
$mycolor: #fa885f
$spacing: 15px

.button
	width: $res-size
	background-color: $mycolor
	padding: $spacing
	margin: $spacing
	a, p
		text-decoration: underline
	&:hover
		background-color: #fff
		color: $mycolor

@res-size: 100%;
@mycolor: #fa885f;
@spacing: 15px;

.button {
	width: @res-size;
	background-color: @mycolor;
	padding: @spacing;
	margin: @spacing;
	a, p {
		text-decoration: underline;
	}
	&:hover {
		background-color: #fff;
		color: @mycolor;
	}
}

.button {
	width: 100%;
	background-color: #fa885f;
	padding: 15px;
	margin: 15px;
}

.button a, .button p {
	text-decoration: underline;
}

.button:hover {
	background-color: #fff;
	color: $mycolor;
}

Werbung

Durch Mixins können Code-Blöcke erstellt werden, die eine zusammenhängende, mehrfach verwendbare Guppierung von CSS-Anweisungen darstellten. Ein solcher Code-Block bzw. eine solche CSS-Deklaration kann letzendlich überall im Code aufgerufen und benutzt werden. Mixins können mit Funktionen in Programmiersprachen verglichen werden.

@mixin reset-spacing {
	margin: 0;
	padding: 0;
}

.button {
	@include reset-spacing;
}

@mixin reset-spacing
	margin: 0
	padding: 0

.button
	@include reset-spacing

.reset-spacing() {
	margin: 0;
	padding: 0;
}

.button {
	.reset-spacing();
}

.button {
	margin: 0;
	padding: 0;
}

@mixin set-spacing($val) {
	margin: $val;
	padding: $val;
}

.button {
	@include set-spacing(5px);
}

@mixin set-spacing($val)
	margin: $val
	padding: $val

.button
	@include set-spacing(5px)

.set-spacing(@val) {
	margin: @val;
	padding: @val;
}

.button {
	.set-spacing(5px);
}

.button {
	margin: 5px;
	padding: 5px;
}

Der @debug Ausdruck gibt den Wert einer Variablen oder einer Berechnung aus. Der Ausdruck wird häufig zum Testen oder kontrollieren von Ausgaben, während der Erstellung des Stylesheets, benutzt und gibt den Wert in Verbindung mit dem Dateinamen und der Zeilennummer aus.

@debug 10px + 2em;		// Inkompatible Einheiten: error
@debug 10px + 5px;		// 15px
@debug 10px + 5;		// 15px
@debug (15px / 3px);	// 5px

@debug 10px + 2em	// Inkompatible Einheiten: error
@debug 10px + 5px	// 15px
@debug 10px + 5		// 15px
@debug (15px / 3px)	// 5px

Less stellt keinen Ausdruck zum debuggen zur Verfügung. Hier werden lediglich normale Variablen verwendet. Du kannst dir aber eine eigene Hilfsklasse bzw. „Mixins“ erstellen.

@calculation-1: 10px + 5em;		// Inkompatible Einheiten: error
@calculation-2: 10px + 5px;		// 15px
@calculation-3: 10px + 5;		// 15px
@calculation-4: (15px / 3px)	// 5px

Werbung