CSS Tutorial mit Präprozessoren SASS und LESS

Letzte Aktualisierung:

Du möchtest mit CSS beginnen, auch wissen was es ist und was man damit machen kann. Dann bist Du hier genau richtig, weil ich dich direkt auf den richtigen weg leiten möchte mit meinem CSS Tutorial. Da es auch Präprozessoren gibt für CSS und man mit diesen gleich OOCSS anwenden kann also Objekt Orientiertes Cascading Style Sheets.



Pur CSS ohne Präprozessoren

Mit CSS kannst Du Dein HTML Markup ein aussehen verleihen und mit Farben so wie Größen versehen. Responsive sollte für Dich ein begriff sein, da heute alle Seiten Responsive sind oder noch werden. Responsive bedeutet das die Seite von Mobile bis zur Desktop TV Auflösung voll flexible ist und sich somit nahe zu jeder Auflösung anpasst. Dabei helfen Dir Breakpoints die man mit media queries setzt und so die Kontrolle über bestimmte Auflösungen gewinnt.

@media only screen and(max-width:764px) {}

Um die Kontrolle nicht über sein CSS zu verlieren sollte man als erstes einiges in Erfahrung bringen mit CSS, dieses Tutorial geht auf einige ein jedoch nicht auf alle da es den Rahmen sprengen würde.



SASS und LESS installieren

Um die Präprozessoren zu nutzen müssen diese zuerst installiert werden. AM besten gleich Global damit man die Globale installation in allen Projekten nutzen kann.

npm install -g sass
npm install -g less

Nach dem installieren kannst Du bereits SASS oder auch LESS Einsätzen, jedoch kannst du auch ein Editor nutzen und dort einbinden so das man es für dafür vorgesehene Oberflächen bedienen kann. Hier findest Du ein Beispiel für  NetBeans LESS integrieren und automatisiert kompilieren.



Nutze SASS oder LESS

Bei den Präprozessoren tut sich nicht viel der eine Entwickler nutzt gerne SASS der andere gerne LESS, jedoch kannst Du mit beiden das selbe machen. Sie helfen dir dein code verschachtelt zu schreiben (OOCSS), vereinfachen mit Funktionen Kalkulationen oder auch Wert Veränderungen und vieles mehr.

 SASS
 LESS

Du kannst LESS oder auch SASS in Editoren direkt integrieren und nutzen. Du solltest dich gleich an eines dieser Prozessoren gewöhnen da sie dir viel Zeit und Arbeit ersparen werden. Und vergesse nicht eine Methode wie BEM zu nutzen um zu skalieren und die Kontrolle zu behalten. Hier findest Du auch gleich ein Beispiel dafür:  SASS Elternteil ansprechen



Was sollte man vermeiden

Ich habe auch ein paar nützliche Tipps für dich die du sehr gut als Anfänger gebrauchen kannst.

  • Vermeide wenn es geht ID zu nutzen und versuche dein code zu skalieren in dem Du deine Elemente mit einzigartigen Klassen versiehst.
  • Du solltest auch kein important verwenden, da Du so dir selber Schwierigkeiten bereiten wirst.
  • Trenne dein Style von deinem HTML und nutze keine inline styles.
  • Spreche mit CSS keine Tags direkt an.


Hier findest Du eine Zusammenfassung von mir über diverse Methoden.

 ACSS BEM OOCSS und SMACSS