Durchstarten mit SASS
Sass, oder „Syntactically Awesome Style Sheets“, ist eine Language Extension von CSS. Sie fügt Funktionen hinzu, die in Basis-CSS nicht verfügbar sind und die es Ihnen erleichtern, die Stylesheets für Ihre Projekte zu vereinfachen und zu pflegen. In diesem Artikel erfahren Sie, wie Sie Daten in Variablen speichern, CSS verschachteln, wiederverwendbare Stile mit Mixins erstellen, Logik und Schleifen zu Ihren Stilen hinzufügen und vieles mehr.
Daten speichern mit Sass Variablen
Ein Merkmal von Sass, das sich von CSS unterscheidet, ist die Verwendung von Variablen. Sie werden deklariert und festgelegt, um Daten zu speichern, ähnlich wie bei JavaScript. In JavaScript werden Variablen mit den Schlüsselwörtern let und const definiert. In Sass beginnen Variablen mit einem $, gefolgt von dem Variablennamen.
Hier sind einige Beispiele:
$main-fonts: Arial, sans-serif; $headings-color: green;
Und um die Variablen zu verwenden:
h1 {
font-family: $main-fonts;
color: $headings-color;
}
Ein Beispiel, bei dem Variablen nützlich sind, ist, wenn eine Reihe von Elementen dieselbe Farbe haben müssen. Wenn diese Farbe geändert wird, muss der Code nur am Variablenwert geändert werden.
Verschachteln von CSS mit Sass
Sass erlaubt die Verschachtelung von CSS-Regeln, was eine nützliche Methode zur Organisation eines Stylesheets ist. Normalerweise wird jedes Element auf eine andere Zeile ausgerichtet, um es zu stylen, etwa so:
nav {
background-color: red;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
}
Bei einem grossen Projekt wird die CSS-Datei viele Zeilen und Regeln enthalten. Hier kann die Verschachtelung helfen, Ihren Code zu organisieren, indem Sie Regeln für untergeordnete Stile innerhalb der jeweiligen übergeordneten Elemente platzieren:
nav {
background-color: red;
ul {
list-style: none;
li {
display: inline-block;
}
}
}
Wiederverwendbares CSS mit Mixins erstellen
In Sass ist ein Mixin eine Gruppe von CSS-Deklarationen, die im gesamten Stylesheet wiederverwendet werden können. Neuere CSS-Funktionen benötigen Zeit, bevor sie vollständig übernommen werden und in allen Browsern verwendet werden können. Wenn Funktionen zu Browsern hinzugefügt werden, benötigen CSS-Regeln, die sie verwenden, möglicherweise Herstellerpräfixe. Betrachten Sie box-shadow:
div {
-webkit-box-shadow: 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 4px #fff;
-ms-box-shadow: 0px 0px 4px #fff;
box-shadow: 0px 0px 4px #fff;
}
Es ist eine Menge Tipparbeit, diese Regel für alle Elemente, die einen Box-Shadow haben, neu zu schreiben oder jeden Wert zu ändern, um verschiedene Effekte zu testen. Mixins sind wie Funktionen für CSS. Hier ist, wie man eine schreibt:
@mixin box-shadow ($x, $y, $blur, $c) {
-webkit-box-shadow: $x $y $blur $c;
-moz-box-shadow: $x $y $blur $c;
-ms-box-shadow: $x $y $blur $c;
box-shadow: $x $y $blur $c;
}
Die Definition beginnt mit @mixin, gefolgt von einem benutzerdefinierten Namen. Die Parameter ($x, $y, $blur und $c im obigen Beispiel) sind optional. Wenn nun eine Box-Shadow-Regel benötigt wird, reicht eine einzige Zeile, die das Mixin aufruft, um die Eingabe aller Herstellerpräfixe zu ersetzen. Ein Mixin wird mit der @include directive aufgerufen:
div {
@include box-shadow(0px, 0px, 4px, #fff);
}
Verwenden Sie @if und @else, um Ihren Styles Logik hinzuzufügen
Die @if directive in Sass ist nützlich, um auf einen bestimmten Fall zu testen – sie funktioniert genau wie die if-Anweisung in JavaScript.
@mixin make-bold($bool) {
@if $bool == true {
font-weight: bold;
}
}
Und genau wie in JavaScript testen @else if und @else auf weitere Bedingungen:
@mixin text-effect($val) {
@if $val == danger {
color: red;
} @else if $val == alert {
color: yellow;
} @else if $val == success {
color: green;
} @else {
color: black;
}
}
Verwenden Sie @for, um eine Sass Loop zu erstellen
Die @for directive fügt Stile in einem Loop hinzu, der einem for Loop in JavaScript sehr ähnlich ist. @for kann auf zwei Arten verwendet werden: „start through end“ oder „start to end“. Der Hauptunterschied besteht darin, dass „start to end“ die Endnummer als Teil der Zählung ausschliesst, während „start through end“ die Endnummer als Teil der Zählung einschliesst.
Hier ist ein Beispiel von Anfang bis Ende:
@for $i from 1 through 12 {
.col-#{$i} { width: 100%/12 * $i; }
}
Der #{$i} Teil ist die Syntax für die Kombination einer Variablen (i) mit Text, um eine Zeichenkette zu erstellen. Wenn die Sass-Datei in CSS umgewandelt wird, sieht sie wie folgt aus:
.col-1 {
width: 8.33333%;
}
.col-2 {
width: 16.66667%;
}
...
.col-12 {
width: 100%;
}
Dies ist eine leistungsstarke Methode zur Erstellung eines Rasterlayouts. Jetzt haben Sie zwölf Optionen für Spaltenbreiten als CSS-Klassen zur Verfügung.
@each verwenden, um Elemente in einer Liste zu überlagern
Das letzte Beispiel hat gezeigt, wie die @for directive einen Start- und Endwert verwendet, um eine bestimmte Anzahl von Loops zu durchlaufen. Sass bietet auch die @each directive, die über jedes Element in einer Liste oder Map eine Schleife zieht. Bei jeder Iteration wird der Variable der aktuelle Wert aus der Liste oder Map zugewiesen.
@each $color in blue, red, green {
.#{$color}-text {color: $color;}
}
Eine Karte hat eine etwas andere Syntax. Hier ist ein Beispiel:
$colors: (color1: blue, color2: red, color3: green);
@each $key, $color in $colors {
.#{$color}-text {color: $color;}
}
Beachten Sie, dass die Variable $key benötigt wird, um auf die Schlüssel in der Map zu verweisen. Andernfalls würde das kompilierte CSS color1, color2… enthalten. Die beiden obigen Codebeispiele werden in das folgende CSS umgewandelt:
.blue-text {
color: blue;
}
.red-text {
color: red;
}
.green-text {
color: green;
}
Einen Stil anwenden, bis eine Bedingung erfüllt ist mit @while
Die @while directive ist eine Option mit ähnlicher Funktionalität wie die JavaScript-While-Schleife. Sie erstellt CSS-Regeln, bis eine Bedingung erfüllt ist. In der @for Herausforderung wurde ein Beispiel für die Erstellung eines einfachen Rastersystems gegeben. Dies kann auch mit @while funktionieren.
$x: 1;
@while $x < 13 {
.col-#{$x} { width: 100%/12 * $x;}
$x: $x + 1;
}
Definieren Sie zunächst eine Variable $x und setzen Sie sie auf 1. Anschliessend verwenden Sie die @while directive, um das Rastersystem zu erstellen, solange $x kleiner als 13 ist. Nachdem die CSS-Regel für die Breite festgelegt wurde, wird $x um 1 erhöht, um eine Endlosschleife zu vermeiden.
Aufteilung Ihrer Stile in kleinere Teile mit Partials
Partials in Sass sind separate Dateien, die Segmente von CSS-Code enthalten. Diese werden importiert und in anderen Sass-Dateien verwendet. Dies ist eine gute Möglichkeit, ähnlichen Code in einem Modul zu gruppieren, um ihn zu organisieren.
Die Namen für Teilstücke beginnen mit dem Unterstrich (_), der Sass mitteilt, dass es sich um ein kleines CSS-Segment handelt und es nicht in eine CSS-Datei umgewandelt werden soll. Außerdem enden Sass-Dateien mit der Dateierweiterung .scss. Um den Code in einem Teilbereich in eine andere Sass-Datei zu übernehmen, verwenden Sie die @import directive.
Wenn zum Beispiel alle Ihre Mixins in einer Teildatei mit dem Namen „_mixins.scss“ gespeichert sind und sie in der Datei „main.scss“ benötigt werden, können Sie sie so in der Hauptdatei verwenden:
@import 'mixins'
Beachten Sie, dass der Unterstrich und die Dateierweiterung in der Importanweisung nicht erforderlich sind – Sass versteht, dass es sich um einen Teilcode handelt. Sobald ein Partial in eine Datei importiert wurde, stehen alle Variablen, Mixins und sonstiger Code zur Verwendung bereit.
Erweitern eines Satzes von CSS-Stilen auf ein anderes Element
Sass verfügt über eine Funktion namens extend, die es einfach macht, CSS-Regeln von einem Element zu übernehmen und sie in einem anderen Element zu verwenden. Der nachstehende Block von CSS-Regeln dient beispielsweise der Gestaltung einer .panel class. Er hat eine Hintergrundfarbe, eine Höhe und einen Rahmen.
.panel{
background-color: red;
height: 70px;
border: 2px solid green;
}
Jetzt wollen Sie ein weiteres Panel namens .big-panel. Es hat die gleichen Basiseigenschaften wie .panel, benötigt aber auch eine Breite und eine Schriftgrösse. Es ist möglich, die ursprünglichen CSS-Regeln von .panel zu kopieren und einzufügen, aber der Code wird repetitiv, wenn Sie weitere Arten von Panels hinzufügen. Die extend directive ist eine einfache Möglichkeit, die für ein Element geschriebenen Regeln wiederzuverwenden und dann weitere für ein anderes hinzuzufügen:
.big-panel {
@extend .panel;
width: 150px;
font-size: 2em;
}
Das .big-panel hat die gleichen Eigenschaften wie .panel und zusätzlich die neuen Stile.
Referenzen
Foto von Paweł Czerwiński auf Unsplash