Sass vs. SCSS vs. Less

Was ist CSS?

CSS (Cascading Style Sheets) ist eine Designsprache und der bevorzugte Weg Webseiten, mobile Anwendungen oder Web-Applikationen zu gestalten bzw. zu konstruieren. Mit Hilfe der Designsprache können unter Anderem Farbe, Größe, Abstand und Position von HTML-Elementen angepasst werden. Außerdem können, durch sogenannte „media queries“, verschieden Displaygrößen abgefragt werden, deren Layout bzw. Design dann je nach Endgerät unterschiedlich dargestellt wird – Responsive Design. Media Queries wurden allerdings erst ab CSS3 Version eingeführt.

Cascading (deutsch: kaskadierend, fallend, stufenförmig) bedeutet in diesem Kontext, dass Regeln bzw. Stile die einem bestimmten Element zugeordnet werden, an alle Kind-Elemente vererbt werden, die sich in diesem übergeordneten Element befinden. Weißt man zum Beispiel dem body-Element eines HTML Dokuments eine Eigenschaft zu, übernehmen alle Elemente die sich innerhalb des body-Tags befinden, diese Eigenschaft. Es sei denn einem Kind Element wird eine neue Eigenschaft zugewiesen, dann wird diese überschrieben. 

CSS ist einfach zu erlernen und zu verstehen, trotz dessen ist es eine mächtige Sprache um HTML/XHTML Dokumente zu gestalten.

CSS Präprozessoren

Präprozessoren werden im Regelfall dafür verwendet, um bestimmte Eingaben zu konvertieren und zur Weiterverarbeitung an ein anderes Programm zu übergeben. Durch CSS Präprozessoren wird CSS Code aus der Syntax des Präprozessor generiert.

CSS Präprozessoren erweitern CSS um einige Features, wie zum Beispiel Variablen, Mixins und Funktionen zur Manipulation von Farben und für mathematische Berechnungen um einen übersichtlicheren, schlankeren und somit eleganteren Code vorzuweisen.

Einige der bekanntesten CSS Präprozessoren sind: Sass, SCSS und Less.

Sass und SCSS

Die Präprozessor Skriptsprache SassSyntactically 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 – SCSSSassy 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

LessLeaner 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

Variablen und Verschachtelungen

SCSS

$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;
	}
}
nestings.scss

Sass

$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
nestings.sass

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;
	}
}
nestings.less

CSS

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

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

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

Mixins

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.

SCSS

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

.button {
	@include reset-spacing;
}
mixins.scss

Sass

@mixin reset-spacing
	margin: 0
	padding: 0

.button
	@include reset-spacing
mixins.scss

Less

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

.button {
	.reset-spacing();
}
mixins.less

CSS

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

Werbung


Mixins inklusive Parameterübergabe

SCSS

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

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

Sass

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

.button
	@include set-spacing(5px)
mixins.sass

Less

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

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

CSS

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

Mathematische Operatoren

Es gibt die Möglichkeit mathematische Berechnungen innerhalb des CSS Codes durchzuführen. Sowohl Sass als auch Less erlauben grundlegende mathematische Operatoren wie: +, -, *, / und Vergleichsoperatoren wie: <, >, <=, >=, =, um Zahlen, Farben oder Variablen berechnen bzw. vergleichen zu können.

SCSS und Sass

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.

SCSS

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

Sass

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

Less

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
math.less

Werbung

Amazon Affiliate WordPress Plugin - Das #1 Plugin für erfolgreiches Affiliate Marketing
Amazon Affiliate WordPress Plugin - Das #1 Plugin für erfolgreiches Affiliate Marketing

CSS Frontend Frameworks

Die 7 besten CSS Frameworks für 2020
keyboard_arrow_right

Free Icon Packs

Die 8 besten Icon Packs für Entwickler und Designer
keyboard_arrow_right