If you’ve ever wished for more readable and maintainable CSS, SCSS (the current version of Sass) is the tool you’ve been waiting for. SCSS builds upon CSS3 to add features such as reusable variables and blocks, functions for manipulating colors and doing mathematical operations, selector nesting, and style inheritance. Before deploying, you simply compile your SCSS into ordinary CSS files in one easy (and easily automated) step. This session will present the core features of SCSS with helpful examples, and get you excited about writing CSS again.

1. Sassy!
Stylesheets with SCSS
Kathryn Rotondo
@krotondo
This work is licensed under
http://creativecommons.org/licenses/by-nc-sa/3.0
Saturday, May 11, 13

2. What is
SCSS?
Saturday, May 11, 13

3. SCSS:
Sassy CSS
Saturday, May 11, 13

4. A superset
of CSS3
Saturday, May 11, 13

5. Features
Variables
Mixins
Functions
Nesting
Inheritance
Saturday, May 11, 13

6. CSS pre-
processor
Saturday, May 11, 13

7. style.scss
style.css
Saturday, May 11, 13

8. Getting
Started
Saturday, May 11, 13

9. Ruby Gem
http://sass-lang.com/
download.html
Saturday, May 11, 13

10. Hammer
hammerformac.com
Saturday, May 11, 13

11. Ready to
Code!
Saturday, May 11, 13

12. Variables
constants
Saturday, May 11, 13

13. Declare Vars
$blue: #3bbfce;
$margin: 16px;
Saturday, May 11, 13

14. Use Vars
.border {
color: $blue;
margin:$margin;
}
Saturday, May 11, 13

15. Variables
numbers 1.2, 13, 10px
strings "foo", 'bar', baz
colors blue, #04a3f9
booleans true, false
nulls null
lists 1.5em 1em 0 2em
Helvetica, Arial, ...
Saturday, May 11, 13

16. Mixins
reusable code
blocks
Saturday, May 11, 13

17. Declare Mixin
@mixin centered {
display:block;
margin-left:auto;
margin-right:auto;
}
Saturday, May 11, 13

18. Use Mixin
img {
@include: centered;
}
Saturday, May 11, 13

19. Mixin Args
@mixin border-radius ($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
Saturday, May 11, 13

20. Mixin Args Use
img {
@include border-radius(20px);
}
Saturday, May 11, 13

21. Vendor Prefixes
@mixin box-shadow ($h-shadow, $v-shadow, $blur, $color) {
-moz-box-shadow: $h-shadow $v-shadow $blur $color;
-webkit-box-shadow: $h-shadow $v-shadow $blur $color;
box-shadow: $h-shadow $v-shadow $blur $color;
}
@mixin drop-shadow {
$args: 0 15px 30px rgba(0,0,0,.5);
-webkit-filter: drop-shadow(args);
-moz-filter: drop-shadow(args);
-ms-filter: drop-shadow (args);
-o-filter: drop-shadow (args);
filter: drop-shadow (args);
}
Saturday, May 11, 13

22. Functions
colors, math,
& more
Saturday, May 11, 13

23. Color Functions
rgb, rgba/hsl, hsla
lighten/darken
complement, invert
opacify, transparentize
... & more!
Saturday, May 11, 13

24. Function Use
h1 {
color:lighten($main-color, 20%);
}
h2 {
color:complement($main-color);
}
Saturday, May 11, 13

25. Basic Math
.border {
color: $blue;
margin:$margin;
padding: $margin/2;
}
Saturday, May 11, 13

26. Math Functions
percentage
round, ceil, floor
min, max
abs
Saturday, May 11, 13

27. More Functions
http://sass-lang.com/
docs/yardoc/Sass/
Script/Functions.html
Saturday, May 11, 13

28. Nesting
organizing
like with like
Saturday, May 11, 13

29. Nesting
a {
color: $link-color;
&:hover {
color: $link-hover-color;
}
}
Saturday, May 11, 13

30. More Nesting
#nav {
a {
color:$nav-color;
&:hover {
color: $nav-hover-color;
}
}
}
Saturday, May 11, 13

31. Inheritance
avoid duplication
Saturday, May 11, 13

32. Inheritance
.error {
background: #fdd;
}
.badError {
@extend .error;
border-width: 3px;
}
Saturday, May 11, 13

33. Comments
// get removed
/* stay around */
Saturday, May 11, 13

34. Danke!
Kathryn Rotondo
kathrynrotondo.com
@krotondo
This work is licensed under
http://creativecommons.org/licenses/by-nc-sa/3.0
Saturday, May 11, 13