201515Sep

PostCSS: CSS-Preprocessor für Node.js-Build-Tools

Die moderne Entwicklung von Stylesheets findet heutzutage kaum noch in reinem CSS statt: Dank CSS-Präprozessoren wie SASS, LESS oder Stylus können Variablen, Funktionen (Mixins) und echte Verschachtelungen genutzt werden. Die Tools basieren auf systemspezifischen Bibliotheken und erzeugen den finalen CSS-Code mittels Ruby oder Node.js. Wer das ganze in sein bestehendes Frontend-Tooling integrieren möchte (beispielsweise in Grunt oder Gulp), sollte sich PostCSS ansehen.

PostCSS - Transforming styles with JS plugins

Dabei handelt es sich um ein Node.js-Modul, das laut den Entwicklern 2x schneller arbeitet als libsass, die eigentliche SASS-C++-Bibliothek. PostCSS macht zudem Gebrauch von dem CSS-Transpiler cssnext und ermöglicht so zukunftssicheres CSS. Die Integration des entsprechenden Gulp-Tasks könnte beispielweise so aussehen:

  • gulp.task('css', function () {
  • var postcss = require('gulp-postcss');
  • return gulp.src('src/**/*.css')
  • .pipe( postcss([ require('cssnext')(), require('cssnano')() ]) )
  • .pipe( gulp.dest('build/') );
  • });

Viel Spaß beim Ausprobieren!