Was ist SASS?
SASS ist eine Stylesheet-Sprache, die von Hampton Catlin entworfen wurde. Es ist eine Abkürzung für Syntactically Awesome Style Sheets. Es ist eine Skriptsprache für den Präprozessor, die interpretiert oder in Cascading Style Sheets kompiliert werden kann. Es ist eine stabilere und leistungsfähigere Version von CSS, die den Stil eines Dokuments strukturell beschreibt. SASS ist eine Erweiterung von CSS. Es enthält neue Funktionen wie Variablen, verschachtelte Regeln, Mixins, Inline-Importe und integrierte Funktionen, die bei der Manipulation von Farben und anderen Werten helfen. Alle diese sind vollständig mit CSS kompatibel.
Definition
Es ist ein CSS-Pre-Prozessor, der dazu beiträgt, Wiederholungen mit CSS zu reduzieren und damit Zeit zu sparen. Es gilt im Vergleich zu CSS als stabiler und leistungsfähiger. Es beschreibt den Stil eines Dokuments sehr klar und strukturell. Es hilft dabei, die Arbeit schneller und besser zu erledigen. Mit all seinen Funktionen wird es vor allem CSS vorgezogen. Hiermit können Variablen definiert werden, die mit einem $ -Zeichen beginnen können. Die Variablenzuweisung kann mit einem Doppelpunkt erfolgen. Es unterstützt auch die logische Verschachtelung, die CSS nicht unterstützt. SASS ermöglicht es dem Benutzer, verschachtelten Code zu haben, der ineinander eingefügt werden kann.
SASS verstehen
SASS gilt als leistungsstark, stabil und schnell. Der Grund dafür ist, dass es differenzierende Merkmale wie Variablen, Verschachtelung, Mixins usw. hat. Lassen Sie uns diese nacheinander durchgehen und SASS besser verstehen.
1. Variablen:
Mithilfe von Variablen kann der Benutzer bestimmte Werte definieren und im gesamten Code erneut verwenden. Diese Variablen ähneln JavaScript. Jede Variable kann einfach durch Hinzufügen eines $ -Zeichens definiert werden.
Beispiel : $ Variablenname: Variablenwert;
Ein Benutzer kann beliebig viele Variablen definieren. Sobald die Variablen kompiliert sind, werden sie in CSS durch ihre tatsächlichen Werte ersetzt.
2. Verschachtelung:
Das Verschachteln hilft beim Definieren von untergeordneten Selektoren in übergeordneten Selektoren. CSS unterstützt dies nicht und macht SASS daher zu einer optimierten Programmiersprache. Es hilft beim Schreiben sauberer und weniger sich wiederholender Codes.
3. Mixins:
Mixin ist eine weitere nützliche Funktion, die Redundanz reduzieren und die Wiederverwendung von Code ermöglichen kann. Dies ähnelt Funktionen, bei denen ein einmal definierter Code beliebig oft wiederverwendet werden kann.
4. Partials und Importe:
Partials sind separate Dateien, die Code enthalten können, der den Code modular macht. Mit dieser Funktion können Sie problemlos separate Dateien für verschiedene Komponenten erstellen. Ein Teilname wird immer durch einen Unterstrich vor dem Namen definiert.
Wie funktioniert SASS?
Um den Code zu erhalten, müssen Sie den SASS Pre-Prozessor verwenden. Es hilft bei der Übersetzung des SASS-Codes in CSS. Dieser Vorgang wird als Transpiring bezeichnet. Es ähnelt dem Kompilieren, aber hier wird die Übersetzung von einer für den Menschen lesbaren Sprache in eine andere durchgeführt, anstatt den für den Menschen relatierbaren Code in Maschinencode zu konvertieren. Der Übergang von SASS zu CSS ist einfach. Alle Variablen, die in SASS definiert sind, werden in CSS durch Werte ersetzt. Dies erleichtert das Erstellen und Verwalten verschiedener CSS-Dateien für Ihre Anwendung.
Wie benutzt man SASS?
Die folgenden Schritte führen Sie zur einfachsten Verwendung von SASS.
- Erstellen Sie einen Demo-Ordner an einem beliebigen Ort auf Ihrem System.
- In diesem Ordner erstellen Sie zwei Ordner / CSS und / scss.
- Sobald diese beiden Ordner erstellt sind, gehen Sie zum Ordner / scss und erstellen Sie eine Datei namens demo.scss. Diese Erweiterung ist scss, was bedeutet, dass es sich um eine SASS-Datei handelt.
- Gehen Sie zur Eingabeaufforderung und navigieren Sie zum Demo-Ordner.
- Sobald Sie in diesem Ordner sind, sehen Sie, wie Ihre scss-Dateien zu CSS kompiliert werden. Geben Sie den folgenden Befehl ein, um zu sehen:
Sass –watch scss: CSS
Die Überwachung ist ein Flag, das die Änderung erkennt und die scss-Datei in die endgültige CSS-Datei kompiliert, die in Ihrer Anwendung verwendet werden kann.
Vorteile von SASS
- Mit SASS kann der Benutzer einen sauberen Code schreiben. Es erleichtert die Handhabung und beim Erstellen eines Programms wird weniger CSS verwendet.
- Es enthält weniger Code, was es einfacher macht, das entsprechende CSS schneller zu haben.
- Es ist stabiler, kraftvoller und eleganter. Es wird von Designern und Entwicklern verwendet und hilft ihnen dabei, effizienter und schneller zu arbeiten.
- Es ist mit CSS kompatibel und daher können alle CSS-Bibliotheken verwendet werden.
- Es bietet Funktionen wie das Verschachteln, die beim Schreiben verschachtelter Syntax helfen und Funktionen wie Farbmanipulation, mathematische Funktionen und andere Werte verwenden.
Warum sollten wir SASS verwenden?
Nachfolgend sind die fünf Hauptgründe aufgeführt, warum Sie SASS verwenden sollten:
- Variablen: Im Gegensatz zu CSS, bei dem Sie immer wieder nach Ihren vorherigen Stilen suchen müssen, verfügt SASS über Variablen, die Informationen speichern und wiederverwendet werden können. Alle Farbwerte, Schriftstapel usw. können gespeichert und bei Bedarf verwendet werden.
- @import: CSS verfügt über @import, der alle anderen Stile abruft, aber keine weitere HTTP-Anforderung erstellt. SASS ist ein Pre-Prozessor, der alle Dateien abruft, bevor er das CSS kompiliert. Infolgedessen wird die CSS-Seite von einer HTTP-Anforderung verarbeitet. Die Anfrage kann in Teile zerlegt werden und wird weiterhin nur eine Seite an den Browser liefern.
- Farbfunktionen: SASS hat verschiedene Funktionen, die CSS ähneln. All dies kann problemlos in SASS verwendet werden.
- @extend: Mit @extend können wir eine Reihe von CSS-Eigenschaften von einem Selektor für einen anderen freigeben.
- Mixins: Mixins sind Deklarationen, die auf der gesamten Site verwendet werden können.
Warum brauchen wir SASS?
SASS ist schneller und effizienter. Der SASS-Code kann wiederverwendet werden und spart somit Zeit. Die Konvertierung von Code von SASS nach CSS ist nicht hektisch und daher ist es ratsam, diese zu verwenden, um Zeit zu sparen.
Richtige Zielgruppe für das Lernen von SASS-Technologien
Jeder Programmierer, der CSS verwendet und nach einer effizienteren und weniger zeitaufwendigen Technologie zum Erstellen von Webanwendungen sucht, kann SASS verwenden und die neuen Funktionen nutzen.
Wie hilft Ihnen diese Technologie, in Ihrer Karriere zu wachsen?
Es ist eine erweiterte Version von CSS. Sobald Sie SASS kennen, können Sie problemlos Freiberufler und Jobs bei großen Unternehmen bekommen. Es hilft Ihnen dabei, schneller zu arbeiten und Ihre Fähigkeiten mit den Funktionen zu demonstrieren, die es bietet.
Fazit
SASS ist eine sehr effiziente Möglichkeit, CSS zu ersetzen. Mit den Variablen, der Verschachtelung, dem Mischen und anderen Funktionen können bessere Ergebnisse erzielt werden als mit CSS. Wenn Sie CSS durch SASS ersetzen, können Sie Ihren Code problemlos wiederverwenden, anstatt immer wieder dasselbe Teil zu schreiben. Verwenden Sie daher SASS und werden Sie frech mit Ihren Anwendungen.
Empfohlener Artikel
Dies war ein Leitfaden für Was ist SASS? Hier haben wir die Konzepte, die Definition, die Arbeitsweise, die Vorteile und das Karrierewachstum von SASS besprochen. Sie können auch unsere anderen Artikelvorschläge durchgehen, um mehr zu erfahren -
- Was ist Bootstrap und wie wird es verwendet?
- Was ist VMware? Was nützt es?
- Was macht ein Application Server?
- Was ist Java-Vererbung?
- Top Vor- und Nachteile von SAS