Wenn Sie dies erneut lesen, bedeutet dies wahrscheinlich, dass Sie mit CSS vertraut sind und von SCSS oder Sass gehört haben, aber noch nicht den Tauchgang gemacht haben.,
Gute Nachrichten. Sass wird dein Leben viel besser machen. Sie werden endlich in der Lage sein, Ihren Code in CSS zu TROCKNEN (wiederholen Sie sich nicht).
Grundsätzlich fehlen CSS einige großartige Funktionen, die dazu beitragen würden, es einfacher zu bedienen und zu lesen. Sass fügt Variablen, Nesting, Partials, Mixins, Extend/Inheritance und Operatoren hinzu. Einige davon sind Dinge, die Programmiersprachen tendenziell haben., Wenn Sie nicht wissen, was einige von ihnen sind, ist das in Ordnung. Wir werden jede davon definieren und Ihnen zeigen, wie sie verwendet werden können.
Ein Sass kann in CSS-Dateien kompiliert werden, wodurch das Schreiben vieler Dateien einfach wird.
Wenn Sie create react app verwenden, haben Sie Glück, da der Verarbeitungsteil bereits für Sie erledigt ist. Wenn nicht, können Sie Grunt oder Gulp verwenden, um Ihre Sass/SCSS-Dateien in CSS zu verarbeiten. Wenn Sie sich noch nicht in einer Umgebung befinden, die dies tut, schlage ich vor, dies zuerst einzurichten. Dieser Artikel soll über die Funktionen von Sass und deren Verwendung sprechen.,
Was ist der Unterschied zwischen Sass und SCSS. Nun, beide können in CSS kompiliert werden. Der eigentliche Unterschied liegt in der Syntax. SCSS verwendet meistens die gleiche CSS-Syntax, während Sass geschweifte Klammern und Semikolons entfernt. In beiden können Sie die zusätzlichen Funktionen verwenden, die Sass bietet.
Das Folgende zeigt die syntaktischen Unterschiede.
Wenn Sie eine Programmiersprache verwenden, wissen Sie, was eine Variable ist. Also werde ich damit nicht zu tief gehen. Im Wesentlichen können Sie mit Sass schließlich Variablen definieren, sodass Sie sie nicht 1000 Mal ändern müssen, wenn Sie sich für eine solche Farbe entscheiden., Sie können einfach Ihre primäre Farbvariable an einer Stelle ändern und Sie können loslegen
$primary-color: #333; body {
background-color: $primary-color;
}.text {
color: $primary-color;
}
Verschachtelung
In CSS können Sie nicht verschachteln. Schauen wir uns diese beiden Selektoren an. Daran ist nichts Schreckliches falsch. Aber wir wiederholen-code.
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
Wir können so in Sass verschachteln. Das sieht viel sauberer aus.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
}
Partials
Partials sind Sass-oder Scss-Dateien mit einem Unterstrich vor dem Dateinamen. Beispielsweise. „_Test.scss“. Was macht das?, Es bedeutet, dass diese bestimmte Datei nicht in CSS umgewandelt werden sollte, wenn die Zeit kommt. Diese Dateien enthalten CSS-Snippets, die dann von anderen SCSS-Dateien importiert werden können.
Dies ist eine großartige Möglichkeit, Ihr CSS zu modularisieren und die Wartung zu vereinfachen. Sie können beispielsweise Variablen speichern, die in mehreren Dateien verwendet werden. Dies ist der Weg, es zu tun.
Mixins
Mixins sind interessant, weil sie eine Programmiersprache ähnliche Funktion hinzufügen. Sie werden sofort erkennen, was ich meine, wenn Sie den Code sehen:
Anstatt dreimal „Drehen(30deg)“ einzugeben., Sie können erstellen, was sich im Wesentlichen wie eine Funktion anfühlt und sich wie eine Art verhält. Sie übergeben die Eigenschaft an das transform () Mixin.
Um diesen Code zu verwenden, müssen Sie das Schlüsselwort „@include“ verwenden.
Mehr Infos wenn Sie hier klicken.
Extend / Inheritance & Operatoren
Ich werde in Teil 2 darüber sprechen, da sie etwas mehr involviert sind. Dies sind einige der nützlichsten Funktionen in SCSS, also folgen Sie bitte und ich werde diesen Blog nächste Woche veröffentlichen!
Bitte folgen Sie mir auf Twitter @thedrewprint und finden Sie mich auf LinkedIn bei Andrew Richards., Danke fürs Lesen!