[Tutorial] Besseres CSS mit Less.js

Ich halte mich heute kurz, da ich das, was ich hier zeige, gerade selbst in einem Projekt anwende. Ich zeige heute, was CSS Preprocessors sind, warum sie einem beim CSS schreiben helfen und wie man einen davon benutzt. Los geht’s!

1 Was ist ein CSS Preprocessor?

CSS ist zwar sehr einfach zu verstehen, doch seine Einfachheit schränkt es etwas ein. Das fiel mir letztens auf, als ich dieselbe Farbe immer wieder auf verschiedene Elemente kopiert habe. Hier wäre es doch super, wenn man in CSS Variablen definieren könnte? Genau das und noch mehr können CSS Preprocessors. Sie geben einem Dinge wie Variablen, Funktionen, Verschachtelung und dynamische Berechnungen an die Hand, damit man effizienter arbeiten kann. Ist man damit fertig, wird der Code in reines CSS übersetzt und kann so ganz normal vom Browser verwendet werden.

Hier ist ein Beispiel vom Preprocessor Less:

@main-color: #80e619;

.box{
 background-color: saturate(@main-color, 20%);
 border-color: lighten(@main-color, 20%);
}

In der ersten Zeile wird eine Variable für eine Farbe bestimmt. Danach bestimmen wir die Farbe und Rahmenfarbe einer Box, indem wir einfach die Variable einspeisen. Nicht nur das, wir verändern diese Farben dynamisch mit saturate und lighten. Saturate verstärkt die Farbe um 20%. So wird aus #80e619 ein helleres Grün, #80ff00. Diese Farbfunktionen sind für mich neben den Variablen am hilfreichsten.

2 Welchen Preprocessor soll ich benutzen?

Als ich nach einer Liste von CSS Preprocessoren gesucht habe, war ich erstaunt über die große Auswahl. Ich beschränke mich einmal auf drei. Die drei, die momentan am meisten verbreitet sind, heißen Sass, Less und Stylus. Mit allen dreien wird man sicherlich viel Spaß haben können. Stylus fällt auf, weil man hier die Klammern weglassen kann und so eine hübschere Syntax erhät. Meine Wahl fällt momentan jedoch auf Less. Die Less Syntax ist ein wenig näher an echtem CSS und so unter Umständen leichter für den Einstieg. Außerdem bin ich auf der Bootstrap Website das erste Mal über Less und Preprocessors gestolpert.

3 Less.js benutzen

Einen CSS Preprocessor in einem Projekt zu nutzen kann einiges an Vorarbeit erfordern. Für Less benötigt man Node.js, Grunt und kann sich nicht vor der Kommandozeile drücken. Das ist die Variante, die auf den Webseiten zur Installation beschrieben wird. Trotz genauem Folgen der Anweisungen hat es eine ganze Weile gedauert, bis es bei mir lief. Ich versuche die Schritte so kurz und genau wie möglich zu halten.

Less.js Installation:

Node.js installieren
Konsole öffnen (Shift+Rechtsklick im Projektordner)
Eingeben: Node -v Wenn eine Versionszahl erscheint, habt ihr Node erfolgreich installiert.
Eingeben: npm install -g grunt-cli

Jetzt eine Datei namens Gruntfile.js anlegen. Das hier reinkopieren:

module.exports = function(grunt) {
  require('jit-grunt')(grunt);

  grunt.initConfig({
    less: {
      development: {
        options: {
          compress: true,
          yuicompress: true,
          optimization: 2
        },
        files: {
          "css/main.css": "less/main.less" // destination file and source file
        }
      }
    },
    watch: {
      styles: {
        files: ['less/**/*.less'], // which files to watch
        tasks: ['less'],
        options: {
          nospawn: true
        }
      }
    }
  });

  grunt.registerTask('default', ['less', 'watch']);
};

Eingeben: npm init Dafür solltet ihr im Projektordner auf Höhe der index Datei sein. Es erscheint ein Assistent. Ihr könnt einfach mehrmals Enter drücken.
Eingeben: npm install grunt grunt-contrib-less grunt-contrib-watch jit-grunt –save-dev
Eingeben: grunt Jetzt läuft grunt und wartet auf Änderungen der less Dateien im less Ordner. Cmd muss also offen bleiben.

Und, klappt es? Ich hoffe, ja 🙂

Nachdem ich das alles gemacht habe, habe ich mir einen neuen Editor heruntergeladen, der zufälligerweise das Verarbeiten von Less automatisch macht. Wenn ihr wollt, könnt ihr euch mal Brackets.io ansehen, ein Editor der auf Webdesign spezialisiert ist!

Jetzt könnt ihr alle Less Funktionalitäten nutzen und so kürzeren und knackigeren CSS Code schreiben! Für eine Liste aller Dinge, die Less kann, schaut hier vorbei. Das war’s, bis bald!