comparing-risks/doc/06_styles.md

Sass

Zum Kompilieren von Sass zu CSS wird gulp-sass verwendet, das node-sass benutzt, welches wiederum auf libsass basiert. node-sass hat sich beim wiederholten gedankenlosen Aktualisieren von nodejs und / oder npm als notorischer Nerventöter herausgestellt, daher an dieser Stelle der Verweis zur Troubleshooting Dokumentation von node-sass. Meist reichte im Falle eines Problems aber ein npm rebuild node-sass.

Struktur

In der Datei main.scss werden alle Stile eingebunden, die in den Partials definiert werden, woraus die endgültige CSS-Datei generiert wird. Die Struktur des src/scss Verzeichnisses sieht folgendermaßen aus:

├── base     // Stile für HTML Elemente
├── config   // Globale Variable
├── modules  // Stile für Module
└── tools    // Definierte *mixins* und Funktionen

Konventionen, Techniken und Tools

Generell wird eine "mobile first" Strategie verfolgt. Als Standard-Einheit wird rem verwendet, auf deren Grundlage die Basis-Einheit definiert ist. Da sich alle Größen auf diese Einheit beziehen sollten, wird so das Skalieren des Layouts erleichtert.

Sass wird in diesem Projekt mit der scss-Syntax verwendet. Stilistisch ist es in "oldschool BEM-Style" gehalten, Zitat der ursprünglichen Entwickler. Sie beziehen sich zudem auf bestimmte Guidelines:

Hugo Giraudel wrote an awesome piece on everything you need to know about Sass, it's called Sass Guidelines and you should really have a look at it. I agree with this guideline in almost all points, but I try to keep something more simple, and some things more strict, the linter will let you know :)

ʕ̡̢̡ॢ•̫͡ॢ•ʔ̢̡̢

Regeln mit Browser-spezifischen Präfixen (vendor prefixes) werden dem CSS automatisch durch autoprefixer hinzugefügt. Die Liste der zu unterstützenden Browser ist in package.json unter browserslist zu finden.