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)

Vorlesung WebProg

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 (HTML validate)
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.

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 Konstanten 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). Es ist jetzt auch möglich CSS-Elemente zu verschachteln. Das heißt, die Bedeutung von SCSS, Less etc. schwindet.

Allerdings werden Konstanten vom SCSS-Präprozessor auf dem Server bei Build-Prozess durch ihre Werte ersetzt. In CSS muss dies defaultmäßig der Browser übernehmen. Es gibt ein PostCSS-Plugin postcss-var-replace, das diese Ersetzungen ebenfalls vornimmt. Dieses kann man in die Vite-Konfiguration integrieren:

npm -i -D postcss-var-replace

// vite.config.js 
import { postcssVarReplace }  from 'postcss-var-replace';

...
export default
{ ...
  plugins:
  ...
  css:
  { postcss:
    { plugins: 
      [ postcssVarReplace(),
      ],
    },
  },
  resolve:
  { alias:
    { '@':          fileURLToPath(new URL('./src',                  import.meta.url)),
      'config.css': fileURLToPath(new URL('./src/css/_config.css',  import.meta.url)),
      '/css':       fileURLToPath(new URL('./src/css',              import.meta.url)),
      '/js':        fileURLToPath(new URL('./src/js',               import.meta.url)),
    }
  },
}

Fazit: Ich werde in diesem Semester CSS an Stelle von SCSS einsetzen, so wie es von vite empfohlen wird.

Because Vite targets modern browsers only, it is recommended to use native CSS variables with PostCSS plugins that implement CSSWG drafts (e.g. postcss-nesting) and author plain, future-standards-compliant CSS. (https://vite.dev/guide/features)