This document provides an introduction and overview of SASS (Syntactically Awesome Style Sheets), a CSS preprocessor. It highlights key SASS features like nesting, variables, math operations, mixins and imports that allow for more efficient, reusable and readable CSS code. The document also briefly explains how to install SASS using Ruby gems and use it to compile SCSS files into normal CSS.

1. SASS
Super awesome stylesheets

2. Who am I?

3. #me {
name: ‘Bram Verdyck’;
&:active {
job: ‘Web ninja @ These Days’;
interests: ‘HTML5, CSS3, JS, Fast cars’;
social: ‘@TroTi13’;
}
&:before {
school:’MCT @ KDG’;
}
}
Who am I?

4. What’s this about?
Image source: http://thekingofthevikings.deviantart.com/art/8-Bit-
Question-Box-170241434

5. S.A.S.S
Syntactically awesome style sheets
Super awesome style sheets
What’s this about?
Image source: http://sass-lang.com/

6. What’s wrong with normal
style sheets?
Image source: http://webwox.wordpress.com/2011/08/31/history-of-
cascading-style-sheetscss/

7. Nothing really…

8. CSS is
awesome!
Image source: http://www.zazzle.com/
css_is_awesome_with_scroll_mug-168224268218561554

9. CSS let’s you make
pretty things
Image source: http://www.onlymotivational.com/pictures/
i_feel_pretty.htm

10. Without it, all websites
would look the same
Image source: http://kill.devc.at/node/284

11. But…

12. Developing CSS is slow
Image source: http://www.tensionnot.com/pictures/Car/Horse-Cart-Car

13. CSS
is
repetitive
Image source: http://www.123rf.com/photo_5880238_windows-shaped-like-
space-invaders-on-building-canada-tower-london-exterior.html

14. CSS
is
messy
Image source: http://vickybeeching.com/blog/why-are-we-musicians-
often-so-messy/messy-office-03/

15. CSS needs external tools
for optimization

16. CSS isn’t really reusable

17. WHAT CAN SASS DO FOR US?
Most important stuff

18. Nesting

19. Be gone repetition
Overview
Better readability
#nav { #nav {
float:left; float:left;
width:100px; width:100px;
}
a {
text-decoration:none; #nav a {
} text-decoration:none;
} }

20. Variables - $

21. Wh00t?
Variables in CSS?
That’s just awesome!
$link-color:#000; #nav {
#nav { float:left;
float:left; width:100px;
width:100px; }
a { #nav a {
color:$link-color; color:#000;
text-decoration:none; text-decoration:none;
} }
}

22. Maths, calculations

23. A+B
$width:100px;
#nav {
height:100px – 2*15;
A–B
padding:10px 15px;
width:$width – 2*10;
}
A*B #nav {
height:70px;
A/B
padding:10px 15px;
width:80px;
}

24. $color:#000; a {
a { color:#000;
color:$color;
&:hover {
&:hover { color:#1a1a1a;
color:lighten($color, 10); }
} }
}
Lighten($color, amount)
darken($color, amount)
$color1 + $color2
$color1 - $color2

25. Mixins - @mixin

26. Reusable ++
Readability ++
@mixin hover-link($color) {
& {
color:$color;
}
&:hover {
color:$lighten($color,10);
}
}
a { @include hover-link(#000); }

27. Import - @import

28. Multiple files
Compiled into 1
Only uses what you want
@import ‘path/to/file.scss’;

29. WHAT CAN SASS DO MORE?
There’s more?!

30. @for $i from 1 through 3 {}
@each $el in h1, h2, h3, h4 {}
$i:0;
@while $i < 6 { $i: $i + 1 }
Loops

31. .link {
color:$link-color;
&:hover {
color:$lighten($color,10);
}
}
a { @extend .link; }
Extend - @extend

32. No more double code
Less writing

33. SASS also auto minifies &
checks for errors
:nested – default
:expanded - normal
:compact - every selector on 1 line
:compressed - no more whitespaces

34. Awesome right?

35. HOW TO INSTALL / USE

36. All you need
is ruby
Easy as pie!
Image source: http://www.sw.it.aoyama.ac.jp/2009/pub/IUC33-ruby1.9/

37. Mmm pie….
Image source: http://www.motivationals.org/demotivational-posters-1/
demotivational-poster-44122.jpg

38. $ gem install sass
$ cd path/to/css
$ sass watch style.scss:style.css
Or
$ cd path/to/css
$ sass watch css:css
And 2 lines in terminal…

39. STOP, HAMMER RECAP TIME!

40. • Nesting
• Variables - $
• Maths & color functions
• Mixins - @mixin
• Import - @import
Recap

41. AND STILL… THERE’S MORE

42. COMPASS

43. Compass
<3 CSS 3
Image source: http://desandro.com/work/zui-site-riot/html5css3.png

44. Loads of
predefined &
tested mixins
Image source: http://compass-style.org

45. Blueprint grid system
built in & ready to use
Image source: http://www.blueprintcss.org/

46. pi()
sin($number)
cos($number)
tan($number)
Extended maths

47. Advanced sprite control

48. STILL NOT CONVINCED?

49. • http://sass-lang.com/
• http://compass-style.org/
• http://rubyinstaller.org/ (windows
needs ruby installer)
• https://github.com/thesedays/scss-
mixins
Check these links!

50. • http://www.thesedays.com
• http://labs.thesedays.com
And these links!

51. THAT’S ABOUT IT…

52. DEMO PLZ?!