![“Later, when you’ve become fluent with Sass
[…], it really does feel like a natural extension
of CSS — as if it’s filling holes we all wish
were filled by the CSS spec itself.”
Dan Cederholm in alistapart.com/article/why-sass](https://image.slidesharecdn.com/csswithsuperpowers-sass-141106155501-conversion-gate02/85/CSS-with-superpowers-SASS-13-320.jpg)
CSS with superpowers - SASS!
- 1. CSS with superpowers ― SASS! Ferdinand Vogler @ferdinandvogler
- 2. Ferdinand Vogler @ferdinandvogler Communication Design student, Working student at YOU IS NOW, Freelance Designer and Web-Developer
- 4. OpenTechSchool opentechschool.org Berlin, Brussels, Dortmund, Hamburg, Istanbul, Jerusalem, London, Melbourne, Nairobi, Ramallah, RheinMain, Stockholm, San Francisco, Tel- Aviv, Washington, Zürich
- 5. “If you really want to learn how to do something, try teaching other people how to do it.” – Steve Krug, Rocket Surgery Made Easy
- 6. Why SASS?
- 7. 1996 First W3C recommendation (CSS1)
- 8. 2014
- 10. Advantages ❏ Variables ❏ Nesting ❏ Reusable blocks ❏ Fewer HTTP requests ❏ Conditionals, Loops & Functions ❏ Mathematics Don’t Repeat Yourself
- 11. How does it work? style.scss Preprocessor style.css
- 12. style.css scss a { color: gray; } a:hover { color: black; font-weight: bold; } p { margin: 10px; }
- 13. “Later, when you’ve become fluent with Sass […], it really does feel like a natural extension of CSS — as if it’s filling holes we all wish were filled by the CSS spec itself.” Dan Cederholm in alistapart.com/article/why-sass
- 14. ಠ_ಠ
- 15. Nope.
- 16. SASS? SCSS? ?
- 17. style.scss style.sass @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } #main { background: gray; width: 50%; @include border-radius(4px); p { background: lightgray; color: black; } } =border-radius($radius) ––-webkit-border-radius: $radius ––-moz-border-radius: $radius ––-ms-border-radius: $radius ––border-radius: $radius #main ––background: gray ––width: 50% ––+border-radius(4px) ––p ––––background: lightgray ––––color: black
- 18. Install SASS
- 19. Ruby Gems Mac Open Terminal: ruby -v Windows Install from www.rubyinstaller.org
- 20. Installation Mac sudo gem install sass Windows gem install sass
- 21. Apps CodeKit Prepros Scout Koala Compass Hammer Mixture LiveReload …
- 22. <> Live-Coding Basic Terminal usage
- 23. Commands cd Change directory cd .. Go back one directory cd ~ Go to Home ls List directory touch Create file rm Remove file mkdir Make directory rmdir Remove directory
- 24. <> Live-Coding SASS in the command line
- 25. Basic SASS commands sass input.scss output.css Compile once sass --watch input.scss:output.css Watch file sass --watch scss:css Watch folder
- 26. Partials |stylesheets |--style.css /* Buttons */ /* Panels */ /* Lists */ CSS
- 27. Partials |stylesheets |--partials |------_buttons.scss |------_panels.scss |------_lists.scss |--vendor |----_normalize.scss |--style.scss @import “partials/buttons”; @import “partials/panels”; @import “partials/lists”; // Third-party stylesheets @import “vendor/normalize”; SCSS style.css
- 28. <> Live-Coding SASS playground
- 29. Variables $color = red; $darkercolor = darken($color, 25%); $lightercolor = lighten($color, 15%); adjust-hue(); saturate(); mix(); grayscale(); desaturate(); invert(); complement();
- 30. Nesting .my-style { .highlight { a { &:hover { } } } }
- 31. Fewer HTTP requests |stylesheets |--partials |------_buttons.scss |------_panels.scss |------_lists.scss |--vendor |----_normalize.scss |--style.scss style.css
- 32. Conditionals, Loops & Functions @function sample($var1, $var2) { … } @for $i from 1 through 10 { … } @mixin block($var1) { @if $var1 == large { … } }
- 34. Further information ❏ www.thesassway.com ❏ www.sass-lang.com ❏ www.leveluptuts.com/tutorials/sass-tutorials ❏ Dan Cederholm – “SASS for Web-Designers” ❏ www.sassmeister.com