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
- 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
- nicht problemlos auf dem Server nutzbar
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
Fazit
Du hast Fragen zu SASS und WordPress oder weitere, praktische Linkempfehlungen? Schreib uns einen Kommentar.
