Was ist SCSS/SASS?

Zurück zu SCSS/SASS:
Auch SCSS/SASS brauch einen Compiler der kann auf PHP oder auch auf NODE.JS beruhen.
Mit PreProcessoren so auch mit SCSS/SASS Schreibt man einen Code mit Funktionen, Variablen, Schleifen if else Abfragen in einer .scss Datei dann Kompiliert man das ganze zur CSS Datei.
Nun fragt man sich wozu das ganze eigentlich, Denn man auch von Anfang alles in CSS Coden oder nicht?

Ja das kann man aber manchmal werden CSS Dateien durch Fehlende Möglichkeiten wie Varibalen/Mixens, extendet usw. Sehr Groß!
Aus diesen Grunde Arbeitet man heute extrem viel mit PreProcessoren wie eben dem Beliebtesten – SCSS oder eben SASS.

Schaut man in den Stellenmärkten nach Frontendentwicklern, Werden Anforderungen in Sachen SASS oft erwähnt man sieht also wieviel Potenzial diese Technologie hat.

Ich möchte euch mal an einen kleinen Beispiel Zeigen wie SCSS Eingesetzt wird zum Vergleich CSS Variante:

Mit Variablen weise ich bestimmte Werte wie Farben in unseren Beispiel zu die ich Theoretisch überall Verwenden kann zum Beispiel ein Corporate Design= Hintergrundfarbeton wird hier in der variabel $cdbgcolor zugewiesen. und der Header mit 100% Breite und 100px höhe Zentriert wird mit diesen Farbwert versehen. Jetzt stellen wir uns vor der Footer hätte die gleiche Farbe so kann ich die Variabel da auch verwenden.

Ändere nun den Wert der Variabel also den HEX Code in #333333; würde überall wo diese Variabel Verwendet wird die Hintergrundfarbe geändert?

Also die Stärke von SCSS/SASS überhaupt der PreProcessoren sind Dynimische Fähigkeiten in unseren Beispiel Variabeln.

$sitebgcolor: #FFFFFF;

$cdbgcolor:#cc0000;

$cdfontcolor:#FFF;

$sitefontsitecolor: #111111;

body

{

background-color: $sitebgcolor

color: $sitefontsitecolor

}

header

{

background-color: $cdbgcolor

color: $cdfontcolor;

padding: 15px;

width:100%;

height:100px;

margin:0px auto;

}

Beispiel MIXINS
Ein Mixin in SCSS/SASS ist ein weitere Interessante Möglichkeiten SCSS/SASS mehrere Werte mehrfach zu verwenden hier mal ein Beispiel

.button

{ @include buttonstyle;

color:#FFF;}

Daraus generiert der Compiler dann:

button

border:1px solid #fff;

color:#FFF;}

Nun die Klasse .button hat hier im Prinzip erstmal nur die Schriftfarbe Weiß zugewiesen. Durch den @include buttonstyle; befehlt im SCSS-Code werden nun die Werte des MIXIN buttonstyle der Klasse Vererbt.

Die Verwendung des Mixin könnte also mehrfach Verwendet werden und auch erweitert werden.

Eine weitere Möglickeit ist die @extend Funktion, Vererbungen & Erweiterungen

Ein Beispiel wir haben eine Klasse – Styling eines Buttons.  Das Innen abstand, Die Position, Schriftgröße und Rahmen Diffiniert.

.buttonstyle

Diese wollen wir eine andere einen anderen Button Vererben oder mehreren.

.button-a

@extend .buttonstyle;
background-color:#c00000;
color:#fff;

.button-b

@extend .buttonstyle;
background-color:#FF0000;
color:#111;

Also hier sieht die macht von SCSS/SASS deutlich man Verwendet also definierte Werte der Kkasse .buttonstyle in 2 Weiteren Button klassen.
Nur hier werden Schriftfarbe & Hintergrundfarbe jeweils anders festgelegt. Theoretisch könnte man hier auch noch mit weiteren @extend Arbeiten und Vererben.

SCSS/SASS hat also Dynamische Fähigkeiten also statisch ist es nicht was sagt uns das?

Nun würde man es nur mit reinen CSS-Coden müsste man überall in der CSS-Datei die Werte Ändern durch Variablen.

In Shopsystemen wie: