06_styles.md 2.1 KB
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.