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

Sass - CSS wie es eigentlich sein sollte

932023bba90ce8911667a5a093e2d1d9?s=47 qutic
November 24, 2012

Sass - CSS wie es eigentlich sein sollte

932023bba90ce8911667a5a093e2d1d9?s=128

qutic

November 24, 2012
Tweet

More Decks by qutic

Other Decks in Technology

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/