Ihr Ansprechpartner:
HashTags
20. Januar 2023
Meine Kunden wird das hier und da mal um den Kopf geworfen, Technologische Begriffe und Technologien mit denen Agenturen so arbeiten.
Jeder Webseite beruht im Prinzip auf HTML (xHTML,HTML5,HTML5.1) ,JavaScripts, CSS.
Letzteres CSS steht für = Cascading Style Sheets
CSS steht für Cascading Style Sheets, was übersetzt „gestufte Stilvorlagen“ bedeutet. Es handelt sich dabei um eine Gestaltungs- und Formatierungssprache, mit der das Aussehen von HTML-Dokumenten bestimmt wird. Es geht also um Design oder Stil, nicht um den Inhalt einer Webseite.
CSS ist im prinzip selber nur eine recht statische Sprache also hat keine Dynamische funktion bis CSS2.1 war das so, mit CSS3 kamen Animationen dazu. Was noch Fehlt waren Funktionen wie das Berechnen, Das Mischen von Farben, Das Vererben, Das Ja/Nein Abfragen usw.
Dann ging man dazu über und entwickelte etwas neues das mit CSS Komform zusammenarbeitet, das Dynamische Generieren von CSS Dateien mit sogenannten CSS PreProcessoren zum dem SCSS/SASS gehört. Beide sind sich im Prinzip sehr Ähnlich. Es gibt noch weitere PreProcessoren:
Hier mal weitere:
- LESS – Serverseitige/Clientseitig über JS oder PHP
- Stylus – Serverseitig über PHP/JS Compiler
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?
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.
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:
SCSS
// Der Einsatz von Variablen zu mehrfacher Verwendung im SCSS
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;
}
CSS
body
{
background-color: #FFFFFF;
color: #111111;
}
header
{
background-color: #cc0000;
color:#ffffff;
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
Ein Mixin in SCSS/SASS ist ein weitere Interessante Möglichkeiten SCSS/SASS mehrere Werte mehrfach zu verwenden hier mal ein Beispiel
//SCSS Code:
@mixin buttonstyle
{ background-color: #71AD2D;
padding: 5px;
position: relative;
font-size: 1rem; height: 48px;
border:1px solid #fff;}
.button
{ @include buttonstyle;
color:#FFF;}
Daraus generiert der Compiler dann:
CSS Code:
button
{ { background-color: #71AD2D;
padding: 5px;
position: relative;
font-size: 1rem; height: 48px;
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
{
padding: 5px;
position: relative;
font-size: 1rem; height: 48px;
border:1px solid #fff;}
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.
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:
- Shopify
- Shopware
- Magento
- OXID
- Plentymarkets
Finden PreProcessoren schon langen in Einsatzzweck, Denn man kann mittels PHP auf denen diese Shopsystem Basieren, SCSS/SASS Dateien Dynamisch Beschreiben. Also über Eingabefelder Werte Eintragen und in d SCSS-Datei Speichern. Der Compiler – Kompiliert es zur CSS-Datei und schon sind Änderungen aktiv.
Mit PreProcessoren werden CSS Dateien Schlanker, effektiver das ist der Grund für der für den Einsatz dieser Technologien spricht.
Aber auch bei CSS geht es in Richtung Dynamisch denn auch CSS3 kann aktuell auch Variablen aber nicht alle Browser Unterstützen es.
Aber auch bei CSS geht es in Richtung Dynamisch denn auch CSS3 kann aktuell auch Variablen aber nicht alle Browser Unterstützen es.
Die CSS-Technologie:
// CSS Variabeln und deren Einsatz – Leider nicht in allen Browser Unterstützt! => https://caniuse.com/css-variables
:root
{–fontcolor-general:#333;
–fontcolor-prim: #71AD2D;
–fontcolor-sub:#111;
–font-size-general:1.2rem;
}
* {box-sizing: border-box;}
body
{margin: 0px;
color:var(–fontcolor-general);
line-height:1.6rem;
font-size:var(–font-size-general);
font-weight: 300;
font-family:’open sans‘, sans-serif;
outline: inherit;
font-style: normal;
background-color: #fff;
}