Sass - CSS wie es eigentlich sein sollte

Transcript

1. © 2012 s.husch@qutic.com Sass CSS wie es eigentlich sein sollte
2. Was ist Sass? ‣ Sass - Syntactically Awesome Stylesheets ‣ Sass ist ein CSS Präprozessor, der Sass zu CSS ‚kompiliert‘ ‣ Folgt dem DRY Prinzip von Ruby On Rails - Don't repeat yourself ‣ Bestandteil der Rails 3 Asset Pipeline ‣ Fazit: Sass ist CSS wie es eigentlich sein sollte
3. Sass-Features ★ Nesting ★ Variablen ★ Funktionen ★ Mixins ★ Vererbung
4. Nesting
5. Variablen
6. Funktionen
7. Mixins
8. Vererbung
9. Alternative Syntax Sass vs. SCSS vs. CSS
10. Installation gem install sass
11. Präprozessor ‣ Syntax-Prüfung erkennt Schreibfehler ‣ @import - alles in einer Datei ‣ Optimiertes CSS (minify, gruppierte Selektoren) ‣ $ sass --watch input-dir:output-dir ‣ $ sass --style compressed input.sass output.css
12. Sass-Tools und -Libraries github.com/search?q=sass&type=Repositories css2sass sass-twitter-bootstrap tenplate
13. Wo ist Sass noch drin? ‣ Typo3: Sassify ‣ Wordpress: Sass for Wordpress ‣ PHP: PHamlP ‣ Python: python-sass ‣ RadiantMagic: Sass- & SCSS-Filter build in
14. ?
15. Lesenswertes ‣ http://sass-lang.com ‣ http://compass-style.org/ ‣ http://thoughtbot.com/bourbon/ ‣ http://www.webkrauts.de/2011/12/04/sass-compas/ ‣ http://www.alistapart.com/articles/getting-started-with-sass/ ‣ http://pragprog.com/book/pg_sass/pragmatic-guide-to-sass ‣ https://github.com/seaofclouds/sass-textmate-bundle ‣ https://github.com/search?q=sass&type=Repositories ‣ http://css2sass.heroku.com/ ‣ https://radiantmagic.com/