Einführung

Wer sich bereits gut mit CSS auskennt, der ist bereit für SCSS. SCSS stellt einige nützliche Funktionen bereit, um einfacher CSS-Code zu schreiben. Zudem lässt sich damit der Code auch viel einfacher verwalten. Auch ich benutze für meine Webseiten SCSS und stelle hier meine Notizen zur Verfügung.

Struktur

Ich verwende als Basis die 7-1-Struktur. Es gibt eine Datei, die alle Dateien zusammenführt, die in 7 verschiedenen Ordner liegen. In Worten von J.R.R. Tolkien ist das Konzept ganz einfach: Eine Datei sie zu knechten, sie alle zu finden, in ein Stylesheet zu treiben und ewig zu binden. Selbstverständlich ist ein solche Sturktur immer auf das eigene Projekt anzupassen. Um Ordnung zu behalten, hilft es dann ab und zu, sich wieder an die Grundregeln zu erinnern. Beginnen wir zuerst mit den einzelnen Ordner.

2. Ordner "base"

Teilweise auch "core" genannt, beinhaltet dieser Ordner ganz grundsätzliche CSS-Codes. In der Regel wird in der Reset-Datei ein gewisser Standard erzwungen. Das ist notwendig, weil viele Browser gewisse Dinge bereits selbst gestalten. Zudem habe ich hier eine Colors-Datei hinzugefügt, in der diverse Farb-Klassen erstellt werden wie bspw. text-info und bg-info.

4. Ordner "layout"

Während die Komponenten dafür zuständig sind, einzelne Elemente darzustellen, so sind die Dateien in diesem Ordner hier für die korrekte Platzierung zuständig. Auf dieser Webseite wäre das die Navigation links, die Sidebase rechts, der Footer unten und der Header oben sowie der Inhalt in der Mitte. Auch sowas wie ein eigenes Grid würden hier definiert werden. Ich habe folgende Dateien:

6. Ordner "themes"

Dateien, die ein ganzes Thema definieren, werden hier verwaltet. Dies könnte beispielsweise ein Thema für den Admin-Bereich sein, welches sich optisch vom normalen öffentlich zugänglichen Bereich unterscheidet. Ich habe beispielsweise für die Seiten im Bereich "EVE Online" eine Datei, die Farben aus dem Spiel zur Verfügung stellt.

main.scss

Und dann gibt es die Eine Datei, die alle Dateien in sich verbindet. Mehr macht sie nicht. So sieht meine aus:

@import 'abstracts/variables';
@import 'abstracts/mixins';

@import 'base/reset';
@import 'base/typography';
@import 'base/colors';

@import 'layout/header';
@import 'layout/footer';
@import 'layout/navigation';
@import 'layout/sidebar';
@import 'layout/content';
@import 'layout/toggle';

@import 'components/list';
@import 'components/hero';
@import 'components/text';
@import 'components/table';
@import 'components/video';
@import 'components/divider';
@import 'components/image';
@import 'components/tweet';

@import 'themes/EVE';

Und wie kriegt man nun eine CSS-Datei kompiliert? Für diese Webseite habe ich nun die drei Grundfarben definiert und dann die Main-Datei eingebunden. Dann kompiliere ich die folgende site.scss Datei und erhalte den ganzen CSS-Code zur Verwendung.

$strz-dark: #000000;
$strz-light: #EEEEEE;
$strz-extra: #990F0F;

@import "main";

Mixins

Mixins sind eine sowas wie Funktionen, die man wie normales CSS verwenden kann. Man kann Argumente übergeben, auch Optionale.

@mixin font-size($size, $lineHeight: $size){
   font-size: $size;
   line-height: $lineHeight;
}

Und so verwendet man ihn:

@include font-size(0.9em);

Und, was vor allem für Media Queries sehr praktisch ist: man kann auch ganz normalen CSS-Inhalt mitgeben.

@mixin from-sd {
   @media (min-width: 700px) {
       @content;
   }
}

Der so verwendet werden kann:

h1 {
   @include from-hd {
      padding-left: 25%;
      padding-right: 25%;
   }
}