Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sass

32d54e67c44ff503de0a24ebce10970a?s=47 radiantmagic
March 24, 2012

 Sass

CSS wie es eigentlich sein sollte

32d54e67c44ff503de0a24ebce10970a?s=128

radiantmagic

March 24, 2012
Tweet

Transcript

  1. © 2012 s.husch@radiantmagic.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. 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/