Sass

Transcript

1. © 2012 [email protected] 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. Andere Plattformen ‣ Typo3: Sassify ‣ Wordpress: Sass for Wordpress

    ‣ PHP: PHamlP ‣ Python: python-sass ‣ RadiantMagic: Sass- & SCSS-Filter build in

14. 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 ‣ https://radiantmagic.com/