These are my slides from the Meetup "CSS with superpowers - SASS!" at ImmobilienScout24 on November 6, 2014. Description: Preprocessors for CSS have become the industry standard and you'll be reading more and more about them all over the tech community. They're named LESS, Stylus or SASS. Preprocessors make CSS more flexible, maintainable and fill in where CSS has its limits and drawbacks.

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

9. Preprocessors

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 {
… }
}

33. Scratching the surface

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

35. Questions? Feedback?
@ferdinandvogler