Funktion Nr. 1: Variablen
In einem Projekt können verschiedene CSS-Klassen die gleiche(n) Regel(n) enthalten. Ein Beispiel: Wir haben 20 Felder auf unserer Webseite mit verschiedenen Hintergrundfarben:
.box-1 {
width: 100px;
height: 100px;
background: red;
}.box-2 {
width: 100px;
height: 100px;
background: yellow;
}....box-20 {
width: 100px;
height: 100px;
background: blue;
}
Später ändert unser Kunde seine Meinung und möchte größere Felder. Also muss ich die Eigenschaften width und height jeder Klasse einzeln erhöhen. Das könnten auch 50 Klassen sein. In der Praxis der Programmierung kann das sehr frustrierend sein. Wie ich oben erwähnt habe, ist dies ein Beispiel für großen Aufwand für kleine Änderungen.
Wie können wir das effizienter machen?
Sass bietet eine Lösung: Variablen. Wie in anderen Programmiersprachen können wir Variablen verwenden, um Werte zu speichern und sie später wiederzuverwenden.
Definition einer Variable:
$variable-name: value;
Wenn wir, um auf das obige Beispiel zurückzukommen, Variablen für width & height :
$box-width: 100px;
$box-height: 100px;
später definieren, wenn eine Änderung erforderlich ist, müssen wir ihre Werte nur einmal ändern:
$box-width: 200px; // changed from 100px to 200px
$box-height: 200px; // that's all!.box-1 {
width: $box-width; // using variables now instead of pixels
height: $box-height;
background: red;
}.box-2 {
width: $box-width;
height: $box-height;
background: yellow;
}....box-20 {
width: $box-width;
height: $box-height;
background: blue;
}
CSS selbst unterstützt jetzt auch Variablen, aber es funktioniert nicht in IE & alten Versionen anderer Browser:
Feature #2: Verschachtelung
Standard CSS unterstützt keine Verschachtelung. Wir können keine Klasse innerhalb einer anderen Klasse schreiben. Wenn das Projekt größer wird, bringt dies ein Problem der Lesbarkeit mit sich und die Struktur sieht nicht schön aus.
Lassen Sie uns zum Beispiel ein Navigationsmenü mit klickbaren Links in HTML definieren:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
HTML unterstützt verschachtelten Code. Ohne Verschachtelung sehen sie in CSS jedoch so aus:
Wir mussten nav für jedes Tag schreiben, sogar für die Pseudoklasse des Ankers (hover), da nav das übergeordnete Tag aller ist. Sass unterstützt jedoch die Verschachtelung:
Hier können wir besser strukturierten Code schreiben wie in HTML. Wir müssen nicht nav Klasse für Klasse schreiben, was auch Redundanz verhindert
Wichtig: Es wird nicht empfohlen, Klassen tiefer als 3 Ebenen zu verschachteln.
Feature #3: Mixins
Wir haben oben gelernt, wie man Variablen für CSS-Regeln verwendet. Aber was ist, wenn wir eine Gruppe von Regeln zusammen verwenden müssen? Sass hat eine Funktion namens Mixins, die uns das ermöglicht.
Was ist ein Mixin?
Mixins sind Sass-Funktionen, die CSS-Deklarationen zusammenfassen. Wir können sie später wie Variablen wiederverwenden.
Wir können ein Mixin mit dem Befehl @ mixin erstellen, gefolgt von einem Namen:
@mixin my-font {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
}
oder wir können ein Mixin als Funktion erstellen und auch Parameter hinzufügen:
$font-color: red;@mixin my-font($font-color) {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
color: $font-color;
}
Nach der Erstellung des Mixins können wir es in jeder Klasse mit dem Befehl @ include verwenden. So können wir das my-font-Mixin verwenden, anstatt jedes Mal 4 Zeilen mit Schriftregeln zu erstellen. Dieser Ansatz vereinfacht den Code.
p {
@include my-font;
}
Die Verwendung von Mixins ist ein guter Weg, um Code-Redundanz zu vermeiden.
Feature #4: Imports
Schließlich können wir unsere riesigen CSS-Dateien mit der Sass-Import-Funktion in kleinere Stücke schneiden. Es ist viel einfacher, & kleinere Dateien zu lesen und zu pflegen, als eine große Datei mit endlosen Zeilen.
Aktuell hat CSS jetzt auch eine Importfunktion. Aber sie funktioniert anders. CSS sendet jedes Mal eine HTTP-Anfrage an den Server, wenn eine Datei importiert werden soll. Sass macht es ohne HTTP-Anfrage, was ein schnellerer Ansatz ist.
Alles, was Sie tun müssen, ist, Ihre Sass-Datei mit dem @ import-Befehl in eine andere Sass-Datei zu importieren:
// Your main Sass file@import 'file';
@import 'anotherFile';.class {
// Your code
}
Wir müssen die .scss-Erweiterungen im Dateipfad nicht verwenden, Sass wird es verstehen.