HTML5-Tutorium: JavaScript: Hello World 06
Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:
Korrektheit: 3 (zu größeren Teilen überprüft) |
Umfang: 4 (unwichtige Fakten fehlen) |
Quellenangaben: 3 (wichtige Quellen vorhanden) |
Quellenarten: 5 (ausgezeichnet) |
Konformität: 3 (gut) |
Inhalt | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5 | Teil 6 | Vue 1 | Vue 2 | Vue 3 | Vue 4 | Vue 5 | Vue 6
Musterlösung
v01: index.html
v02: index.html
(Modularisierung von greet.js
analog zu Hello World 04 v02)
v03: index.html
(Konfiguration mittels JSON analog zu Hello World 04 v03)
Git-Repository
Anwendungsfälle (Use Cases)
Gegenüber dem dritten, vierten und fünften Teil des Tutoriums ändern sich die die Anwendungsfälle nicht. Die Anwendung leistet also genau dasselbe wie zuvor.
In diesem Teil des Tutoriums geht es darum, CSS durch SCSS zu ersetzen, um den CSS-Code „DRY zu machen“.
Erstellen eines neuen Projekts
Erstellen Sie ein neues Projekt hello_world_06
als Fork von hello_world_05
(siehe Hello-World-02-Tutorium).
SCSS
Anstelle von CSS-Dateien verwenden Sie künftig SCSS-Dateien. Das ist zunächst einmal nicht weiter schwer, das jede CSS-Datei automatisch auch eine SCSS-Datei ist. Bei der Verwendung von CSS können Sie allerdings das Prinzip „Don't repeat yourself“ (DRY) nicht beachten. Sie müssen für verschiedene Elemente ständig Informationen wiederholen (gewünschter Font, Hintergrundfarbe, Größenangaben etc.). Deshalb gibt es mehrere Projekte wie z. B. LESS, Sass/SCSS, Stylus, die den CSS-Standard erweitern, um dieses Problem zu vermeiden. Sass verwendet allerdings eine ganz andere Syntax als CSS. Allerdings unterstützt das Sass-Projekt auch die Sprache SCSS, die CSS einfach um weitere syntaktische Elemente ergänzt. Zum Beispiel kann man in SCSS Konstanten definieren:
$font-family-serif: "Times New Roman", Times, serif;
Und nun kann man in eine SCSS-Datei anstelle von "Times New Roman", Times, serif
stets $font-family-serif
schreiben, um den Font von bestimmten Elementen zu definieren.
p
{ font-family: $font-family-serif; }
label
{ font-family: $font-family-serif; }
Wenn man nun diesen Font ändern will, muss das nicht mehr bei allen Elementen einzeln passieren. Es reicht, die Konstantendefinition abzuändern. Der SCSS-Code ist nun DRY.
Weiterentwicklung von CSS
CSS entwickelt sich stetig weiter. Seit einiger Zeit werden auch hier Variablen unterstützt:
:root
{ --font-family-serif: "Times New Roman", Times, serif; }
p
{ font-family: var(--font-family-serif); }
label
{ font-family: var(--font-family-serif); }
Auch die Möglichkeit, Werte zu berechnen, gibt es in der Zwischenzeit (SCSS: math
, CSS: calc
).
Das heißt, die Bedeutung von SCSS, Less etc. schwindet. Aber zurzeit bieten sie immer noch genügend mächtige Erweiterungen gegenüber CSS,
wie z. B. die Möglichkeit, CSS-Elemente zu verschachteln, sodass sich der Einsatz von SCSS noch lohnt.
Transformation von SCSS in CSS
Leider unterstützt kein Browser SCSS direkt (im Gegensatz zu CSS). Aber für was gibt es Transpiler, die eine SCSS-Datei automatisch in eine CSS-Datei übersetzen können. Vite unterstützt CSS-Transpiler von Haus aus. Man muss den gewünschten Transpiler lediglich installieren:
npm i -D sass
Benennen Sie die Datei src/css/body.css
in src/css/body.scss
um. Ersetzen Sie außerdem
in der Datei src/js/main.js
den Import-Befehl
import '/css/body.css';
durch
import '/css/body.scss';
Wenn Sie Ihren Code nun mittels npm run dev
laufen lassen oder mittels npm run build
übersetzen,
sollte die Anwendung noch funktionieren, da der SASS-Loader die neue SCCS-Datei in geeigneten CSS-Code übersetzt.
Schwieriger ist der direkte Import von head.scss
in der Datei index.html
,
da diese SCSS-Datei von Vite nicht in CSS transformiert wird. Ein Workaround für dieses Problem wird später vorgestellt.
SCSS-Konfiguration
In der Datei _config.scss
werden alle von den anderen SCSS-Dateien benötigten Konstanten definiert.
Das heißt, das DRY-Prinzip „Konstanten gehören nicht in den Code, sondern in Konfigurationsdateien“ wird ab sofort beachtet.
Wenn man künftig am Layout einen Zeichensatz, eine Farbe, einen Hintergrund oder Ähnliches ändern will,
reicht es, die entsprechenden Konstanten anzupassen und schon erzeugt Vite automatisch aktualisiere
CSS-Dateien.
Der Underscore _
am Beginn des Dateinamens deutet an, dass diese SCSS-Datei nur von anderen SCSS-Dateien
aber nicht von HTML- oder JavaScript-Dateien importiert werden. Durch SCSS-Import-Befehle ist es möglich, auch SCSS-Dateien
zu modularisieren.
src/css/_config.scss
@use 'sass:math';
$background-color: #C5EFFC;
$font-family-sans: Verdana, Helvetica, sans-serif;
$font-family-serif: "Times New Roman", Times, serif;
$font-size-base: 3vw;
$font-size-factor: 1.25; /* cmp. https://type-scale.com/ */
$font-size-h5: math.pow($font-size-factor,1)*$font-size-base;
$font-size-h4: math.pow($font-size-factor,2)*$font-size-base;
$font-size-h3: math.pow($font-size-factor,3)*$font-size-base;
$font-size-h2: math.pow($font-size-factor,4)*$font-size-base;
$font-size-h1: math.pow($font-size-factor,5)*$font-size-base;
$font-size-p: math.pow($font-size-factor,0)*$font-size-base;
$font-size-p-large: math.pow($font-size-factor,2)*$font-size-base;
$font-size-small: math.pow($font-size-factor,-1)*$font-size-base;
In dieser SCSS-Datei werden folgende SCSS-Erweiterungen verwendet:
- Mathematische Berechnungen:
@use 'sass:math';
- Definition von Konstanten (die teilweise per Berechnung ermittelt werden)
- Fonts sollten aus designerischen Gründen besser lokal gespeichert und per CSS eingebunden werden.
Konstanten starten in SCSS mit einem Dollarzeichen. Sobald eine Konstante definiert wurde,
kann sie in allen weiteren SCSS-Konstrukten verwendet werden. In SCSS stehen einen Operatoren zur Verfügung wie
+
, -
, *
und /
, um Maße zu berechnen. Es gibt
weitere Operatoren zum Vergleichen von Zahlen und Maßen sowie zur Berechnung von Strings und booleschen Werten:
https://sass-lang.com/documentation/operators.[1]
Die Datei _config.scss
kann nun mit Hilfe des SCSS-Befehls @import 'config';
(ohne Underscore und ohne Endung)
in die anderen beiden SCSS-Dateien eingefügt werden. Das Sass-Package
kennt diesen Befehl und führt ihn beim Erstellen der zugehörigen CSS-Dateien auch aus.
Der Import-Befehl hat erst dann einen Effekt, wenn in den anderen Dateien auf diese Konstanten zugegriffen wird. Aber er schadet auch nicht, wenn auf keine der dort definierten Konstanten zugegriffen wird. Der Import-Befehl selbst taucht ebenso wenig in den generierten CSS-Dateien auf, wie die Konstantendefinitionen. Der Transpiler ersetzt Konstanten in CSS-Definitionen durch ihren jeweiligen Wert.
Sie können nun beispielsweise in der Datei head.scss
die Konstante $background-color
verwenden. In der daraus erzeugten CSS-Datei steht weiterhin der Farbwert #C5EFFC
;
src/css/head.scss
@import 'config';
body
{ background-color: $background-color; }
.hidden
{ display: none; }
Erstellen Sie diese Datei und führen Sie da folgenden Transpiler-Befehl aus:
node_modules/sass/sass.js src/css/head.scss
In der Konsole sehen Sie den daraus erzeugten zugehörigen CSS-Code.
Die Datei body.scss
ist deutlich umfangreicher. Daher wird der zugehörige CSS-Code
ja auch erst gemeinsam mit der Datei web/js/main.js
geladen.
src/css/body.scss
@import 'config';
html
{ height: 100%;
width: 100%;
display: table;
}
body
{ display: table-cell;
text-align: center;
vertical-align: middle;
background-color: $background-color;
font-size: $font-size-base !important;
font-family: $font-family-sans;
}
h1
{ padding: 0;
margin: 0;
font-size: $font-size-h1;
}
p, label
{ font-family: $font-family-serif;
font-size: $font-size-p !important;
}
label, input, button
{ width: 10em;
font-size: 100%;
display: inline-block;
box-sizing: border-box;
margin: 0.5ex;
}
label
{ text-align: right;
}
#section_form
{ text-align: center;
margin-left: auto;
margin-right: auto;
h1
{ margin-bottom: 0.5ex; }
}
#section_hello
{ p
{ font-size: $font-size-p-large !important; }
}
In dieser SCSS-Datei werden folgende SCSS-Erweiterungen verwendet:
- Import-Befehl:
@import 'config';
- Konstanten:
$font-family-sans
,$font-size-base
etc. (Es sind noch viele weitere konstante Werte inbody.scss
enthalten, für die in_config.scss
Konstanten definiert werden sollten) - Verschachtelte Anweisungen: z. B.
h1
innerhalb von#section_form
Die verschachtelten Anweisungen strukturieren den CSS-Code deutlich besser. Es ist nicht mehr
notwendig, einen Selektor wie #section_form
mehrfach zu verwenden.
Sehen Sie sich den Unterschied an. In der Datei src/css/body.css
der Musterlösungen vom dritten Teil des Tutoriums hatte ich
Folgendes geschrieben:
#section_form
{ text-align: center;
margin-left: auto;
margin-right: auto;
}
#section_form > h1
{ margin-bottom: 0.5ex; }
Die SCSS-Variante ist deutlich strukturierter und prägnanter.
#section_form
{ text-align: center;
margin-left: auto;
margin-right: auto;
h1
{ margin-bottom: 0.5ex; }
}
Insbesondere bei großen CSS-Dateien erweist sich diese kompaktere Schreibweise als vorteilhaft.
Weitere SCSS-Konstrukte
SCSS ist sehr mächtig. Es gibt neben der Import-Anweisung eine Use-Anweisung (@use
)[2], die SCSS-Konstrukten im Gegensatz zur Import-Anweisung einen Namespace zuweist. Damit ist es möglich, mehrere SCSS-Module zu verwenden, auch wenn
dieses gleichbenannte Elemente enthalten, ohne dass es zu Namenskollisionen kommt.
Darüber hinaus gibt es Mixins[3] und Funktionen[4]. Mit Mixins kann man ganze Styleblöcke definieren, um sie mehrfach zu verwenden. Mixins werden mit @include
eingebunden. Dabei kann man Argumente an die Mixins übergeben, mit denen die entsprechenden Konstanten innerhalb des Mixins initialisiert werden. Funktionen funktionieren wie Funktionen in anderen Programmiersprachen auch. Es stehen einem If-Anweisungen und Schleifen-Befehle zur Verfügung.
SCSS ist im Prinzip eine vollwertige Programmiersprache, um CSS-Dateien modular zu erstellen.
head.scss
Wie bereits erwähnt wurde, kann man die Datei head.scss
nicht in die Datei index.html
importieren,
da Vite den Sass-Transpiler hier nicht anwendet. Wie wir aber auch gesehen haben, kann man den Sass-Transpiler auch direkt aufrufen,
um die Datei head.css
zu generieren. Ergänzen Sie die entsprechenden Befehle im scripts
-Objekt in der Datei package.json
:
"scripts": {
"predev": "sass src/css/head.scss src/css/head.css",
"dev": "vite",
"prebuild": "sass src/css/head.scss src/css/head.css",
"build": "vite build --emptyOutDir",
"preview": "vite preview"
},
Wenn Sie nun npm run dev
oder npm run build
aufrufen, wird von npm
jeweils automatisch zuvor
npm run predev
bzw. npm run prebuild
ausgeführt. in beiden Fällen wird head.scss
in head.css
transfprmiert.
Die Befehle npm run predev
und npm run prebuild
könnte man auch direkt ausführen. Das ist aber nur bei npm run preview
nötig.
Ein Skript namens view
gibt es nicht. Gäbe es es und würde npm run view
würde auch in diesem Fall zunächst npm run preview
ausgeführt werden.
Fortsetzung des Tutoriums
Sie sollten nun Teil 1 des Vue-Tutoriums bearbeiten. In diesem Teil des Tutoriums wird die oben erstelle Variante in das Vue-Framework transferiert.
Quellen
- Kowarschick (WebProg): Wolfgang Kowarschick; Vorlesung „Web-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2023; Quellengüte: 3 (Vorlesung)