Natürlich haben wir auch bei unserem letzten Meetup – das Thema war CSS/SASS – wieder eifrig Notizen geschrieben. Neben einer kurzen Zusammenfassung in Stichpunkten haben wir außerdem einige praktische Links auf (meist englischsprachige) Artikel zu SASS zusammengetragen.

Kurzer Abriss zu SASS

• SASS ist ein CSS-Präprozessor
  • eigene Sprache, die nicht direkt von Browsern interpretiert werden kann
  • muss zuvor in CSS übersetzt werden
• Dateiformate: .sass und .scss
  • Online-Konverter zwischen beiden Versionen

• Partials
  • Dokument können in kleinere Teile aufgeteilt werden
  • einzelne Partials können leicht in anderen Projekten wiederverwendet werden
  • per @import zusammenfügen
• Mixins
  • @mixin
  • individuell definierbare Code-Blöcke, die in der Regel eine (oder mehrere) Variable akzeptieren
  • super praktisch z.B. für Prefix
  • einbinden per @include mixin-name($wert)
• Extends
  • Import von CSS-Klassen in vorhandene Klassen
• Mathematische Operatoren
  • Rechnen in SCSS!!1elf
  • Praktisch zum Beispiel bei Grids
• Farb-Operationen
  • lighten(), darken()
  • saturate(), desaturate()
• Problem
  • nicht problemlos auf dem Server nutzbar
    • vielleicht doch: SASS.js

Software

• CodeKit (SASS Compiler für Mac OS)
  • super cooler Talk des CodeKit Entwicklers
• Grunt.js
• Gulp.js
• Codepen kann SASS Vorschau live im Browser – sehr schick für Demos!

Linkempfehlungen

• SASS-lang.com
• SASS Style Guide
• Kommentare in Doku
• Introducing SASS Guidelines
• Pascals Boilerplate
• WordCamp-Session Nils Schonwald: „Was ist eigentlich SCSS und brauch ich das?„

Buchempfehlungen

• SASS for Web-Designers

Fazit

 

Du hast Fragen zu SASS und WordPress oder weitere, praktische Linkempfehlungen? Schreib uns einen Kommentar.