Share
Embed
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
Sass-Features
★
Nesting
★
Variablen
★
Funktionen
★
Mixins
★
Vererbung
Slide 4
Slide 4 text
Nesting
Slide 5
Slide 5 text
Variablen
Slide 6
Slide 6 text
Funktionen
Slide 7
Slide 7 text
Mixins
Slide 8
Slide 8 text
Vererbung
Slide 9
Slide 9 text
Alternative Syntax
Sass vs. SCSS vs. CSS
Slide 10
Slide 10 text
Installation
gem install sass
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
Sass-Tools und -Libraries
github.com/search?q=sass&type=Repositories
css2sass
sass-twitter-bootstrap
tenplate
Slide 13
Slide 13 text
Andere Plattformen
‣ Typo3: Sassify
‣ Wordpress: Sass for Wordpress
‣ PHP: PHamlP
‣ Python: python-sass
‣ RadiantMagic: Sass- & SCSS-Filter build in
Slide 14
Slide 14 text
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/