SASS oder auch LESS sind Präprozessoren und ermöglichen Dir jede Menge Features, wie kompilieren Deines CSS, so dass Du am ende minimiertes CSS hast.
Aber wir haben hier viel mehr Möglichkeiten als nur den Code mit SASS zu kompilieren, wir können in OOCSS schreiben also Objekt Orientiert in CSS. Wenn Du in anderen Sprachen bereits OOP nutzt wirst Du es hier auch Mögen und sobald Du Dich daran gewöhnt hast, vielleicht auch CSS vergessen :)
Warum SASS nutzen ?
Um dir die Arbeit und die Übersicht erleichtern möchtest, solltest Du unbedingt einen Präprozessor nutzen. Die haben mehrere Vorteile und das ist nicht nur die Übersicht die man hat. Sondern man kann auch Objekt Orientiert sein CSS handeln, man kann Variablen festlegen, Mixins (Funktionen) hinzufügen und einsetzen, Berechnungen durchführen, CSS Dateien für die Ausgabe komprimieren und vieles mehr. Du siehst es bringt viele Möglichkeiten mit und das ist noch lange nicht alles. Wenn Du SASS oder LESS installieren möchtest findest Du hier unter mehr.
Wie nutze ich das Elternteil in SASS ?
Immer wieder wird der Parent Selector (Elternteil) benötigt wenn man vor allem bevorzugt in BEM Programmiert und deshalb gibt es seit v.3.3 von SASS die Möglichkeit auf diese zu zugreifen. Wir können so auch Entwicklern die es nicht mögen, also die Suche im Editor nicht nutzen können schmackhafter machen. Wie ? Ganz einfach in dem wir den Parent genau so benennen wie die Klasse selbst, anstatt immer das selbe zu schreiben ;) In den meisten fällen wirst Du dies sehen: $parent: &;Aber dies macht keinen sinn, weil dann kann ich das gleich sein lassen wenn ich diese nicht richtig benenne und anderen Entwicklern das schwerer mache. Deshalb sollte jeder Parent in dem Scope so heissen wie die Klasse selbst heisst, es sei den es wird ein kleines Projekt.
0 .mbt-cookie { 1 $mbt-cookie: &; 2 3 &__blockelement1 { 4 5 width: 30%; 6 7 #{$mbt-cookie}__blockelement2 { 8 9 width: 90%; 10 } 11 } 12 } 0 .mbt-cookie .mbt-cookie__blockelement1 { 1 width: 30%; 2 } 3 4 .mbt-cookie .mbt-cookie__blockelement1 .mbt-cookie__blockelement2 { 5 width: 90%; 6 } Arbeiten im Team mit Elternteilen
So nun hätten wir genau das erreicht, dass wir keine Entwickler mehr ärgern. Wenn jetzt ein anderer Entwickler nach dieser Klasse sucht (oder auch einer ID) so kann er einfach, wenn nichts mit Punkt gefunden wurde auf das Dollarzeichen wechseln und schon wird er etwas finden. Wir können jetzt so oft wir wollen auf diesen zugreifen und verschachteln da das Elternteil in der gleich benannten Variable steckt.
SASS Elternteil
Und wenn Du jetzt denkst toll ich benutzte lieber LESS, da gibt es diese Möglichkeit auch, zwar etwas anders aber fast das Selbe Prinzip, deshalb schau hier einmal vorbei: LESS Elternteil ansprechen
Anzeige