This is a brief presentation about SASS and Compass, and their basic functionality.

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?!