Was ist SASS und wie wird es verwendet?

Was ist SASS?

SASS ist eine Abkürzung für Syntactically Awesome Style Sheets. Es ist einer der am häufigsten verwendeten CSS-Präprozessoren.

Die beliebtesten CSS-Präprozessoren sind;

• SASS
• LESS
• Stylus
• PostCSS

Was ist der Unterschied zwischen SASS und CSS?

SASS ist entstanden, um das Schreiben von CSS dynamischer zu machen. Kurz gesagt, es fügt eine Programmiersprache Luft zu CSS. Es enthält viele Funktionen, die in CSS nicht verfügbar sind (Definition von Variablen, Verwendung von verschachtelten Strukturen, Definition von Funktionen, ...).

Was sollten wir also nicht tun, um SASS zu verwenden?

Es gibt mehr als eine Methode der Nutzung, Eine davon sind Konverter, die Sie herunterladen und auf Ihrem Computer installieren können. Konverter wandeln die von uns geschriebenen Dateien mit der Erweiterung .scss kurz in das für Browser verständliche .css-Format um.

Die beliebtesten SASS zu CSS Konverter sind;

• Koala
• Scout-App
• SimpLess
• Sassmeister
• TheSassWay
• Compass
• Prepros

Eine andere Methode ist die Konvertierung mit Hilfe der Befehlszeile.

Wenn Sie Node.js verwenden, können Sie Sass auch mit npm installieren (Methode-1)

Eine der Sprachen, auf denen SASS aufgebaut ist, ist Node.js. Daher müssen wir zuerst Node.js installieren, damit SASS dann über Node.js laufen kann.

Um Node.js zu installieren, müssen Sie die für Ihr System geeignete Version von https://nodejs.org/en/download/ herunterladen und installieren.

npm install -g sass

Wenn Sie Ruby verwenden, können Sie Sass auch mit gem installieren (Methode-2).

Eine der Sprachen, auf denen SASS aufgebaut ist, ist Ruby. Daher müssen wir zuerst Ruby installieren, damit SASS auf Ruby laufen kann.

Dann öffnen wir die Kommandozeile und geben den folgenden Befehl ein.

gem install sass

Was bedeutet dieses Gem?

Ein Gem ist ein Stück Software oder eine Anwendung, die in Ruby ausgeführt werden kann. Kurz gesagt, wir können es ein Plugin nennen.

Nachdem Sie den Code geschrieben haben, kann es 1-2 Minuten dauern, bis die entsprechenden Dateien installiert sind.

Sie können Sass auch für Mac OS X oder Linux mit brew installieren (Methode 3)

Wenn Sie den Homebrew-Paketmanager für Mac OS X oder Linux verwenden, können Sie Dart Sass installieren, indem Sie

brew install sass/sass/sass

Jetzt können wir SASS ausführen. Wir erstellen eine Datei mit der Erweiterung .scss im SASS-Ordner, speichern sie nach der Codierung und führen den folgenden Befehl aus.

sass –watch scss:css

Der von uns geschriebene Befehl durchsucht kontinuierlich das SASS-Verzeichnis und wandelt bei einer Änderung die geänderte Datei mit der Erweiterung .scss in das Format .css um.

Wie schreibt man SASS, welche Funktionen werden am häufigsten verwendet?

1.  Variablen

SASS erlaubt die Verwendung von Variablen in CSS, dies ist eine der nützlichsten Funktionen. Wie ich unten gezeigt habe, wird ein $-Zeichen an den Anfang gesetzt, um anzuzeigen, dass es sich um eine Variable handelt.

SASS:

$general-font: "Helvetica, sans-herif"; $my-color: #a5a5a5; p { font-family: $general-font; color: $my-color; }

CSS-Ausgabe:

p { font-family: "Helvetica, sans-herif; color: #a5a5a5; }

Auf diese Weise können wir die Variablen, die wir definiert haben, überall verwenden. Eine kleine Änderung an der Stelle, an der wir eine Variable definieren, kann sich auf den gesamten geschriebenen Code auswirken.

2. Erstellen von verschachtelten Strukturen (Nesting)

Dies ist eine wichtige Funktion, die das Schreiben von CSS beschleunigt und erleichtert und das Durcheinander im Code reduziert.

SASS:

div { .aciklama{  color:blue;  &:hover{   color:red  } } .resim{  width: 100%; }   }

CSS-Ausgabe:

div .aciklama{ color:blue; } div .aciklama:hover{ color:red; } div .resim{ width: 100%; }  

& symbol :hover :after :before ist eine spezielle Struktur, die in SASS für Selektoren wie z.B. verwendet wird. Sie wirkt sich auf das übergeordnete Element aus, in dem sie sich befindet.

3. importieren

Dies ist eine sehr nützliche Funktion, um Code-Wirrwarr und Verwirrung zu beseitigen. Nehmen wir an, wir haben 2 Dateien mit der Erweiterung .scss. In der einen haben wir unsere Variablen, die wir im Allgemeinen definieren, und in der anderen haben wir unsere SASS-Codes, die wir noch angeben. Mit dieser Funktion kombinieren wir die Datei _variable.scss, in der wir die Variablen definieren, mit der Datei style.scss, die wir weiterhin angeben.

SASS

_variable.scss

$h1-font-size: 50px; $h1-line-height: $font-weight-extralight; $h1-color: #444444; $h1-line-height: 60px;

style.scss

@import "variables"; h1{ font-size: $h1-font-size; line-height: $h1-line-height; font-weight: $h1-font-weight; color: $h1-color; }

CSS Çıktısı

$h1-font-size: 50px;  $h1-line-height: $font-weight-extralight;  $h1-color: #444444;  $h1-line-height: 60px; h1{ font-size: $h1-font-size; line-height: $h1-line-height; font-weight: $h1-font-weight; color: $h1-color; }

4. Ebenen(Mixins)

Die Ebenenstruktur ermöglicht es uns, die CSS-Codes, die wir mit denselben Parametern schreiben, immer wieder zu verwenden, indem wir sie einmal definieren und überall einen einzigen Befehl aufrufen. Es ist dem Aufruf einer Funktion sehr ähnlich, aber hier führen wir keine Operation durch.

SASS

@mixin overlay() { left: 0; top: 0; background: black; opacity: 0.2; } .my-background{ @include overlay(); }

CSS-Ausgabe

.my-background{ left: 0; top: 0; background: black; opacity: 0.2; }

5. Vererbung

Die Vererbungsfunktion wird verwendet, um Elemente mit gemeinsamen CSS-Codes zusammenzufassen.

SASS

.mesaj{ border: 1px solid gray; padding: 15px; color: black; } .basarili{ @extend .mesaj; background: green; } .hata{ @extend .mesaj; background: red; } .uyari{ @extend .mesaj; background yellow; }

CSS-Ausgabe

.mesaj, .basarili, .hata, .uyari{  border: 1px solid gray; padding: 15px; color: black; } .basarili{ background: green; } .hata{ background: red; } .uyari{ background yellow; }

6. Operatoren(Operatoren)

Dies ist eine sehr nützliche Funktion, die es uns ermöglicht, mathematische Operationen in CSS durchzuführen. Sie können mathematische Operationen auf der SASS-Seite durchführen und diese Operation wird als abgeschlossen an die CSS-Seite gesendet.

SASS

.box{  width: 1/3 * 100%; height: 30px * 2.5; }

CSS Çıktısı

.box{ width: 33.333333333% height: 75px; }