This document is a presentation on SCSS (Sassy CSS), which is a CSS preprocessor that adds features like variables, nested rules, mixins, functions and inheritance to regular CSS. It introduces these features and provides examples of how they can make CSS more efficient and reusable. The presentation also recommends related tools like Bourbon and Neat that provide additional mixins and grid frameworks for use with SCSS.

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

2. What is
SCSS?
Saturday, September 14, 13

3. SASS
sass-lang.com/
Saturday, September 14, 13

4. SCSS:
Sassy CSS
Saturday, September 14, 13

5. A superset
of CSS3
Saturday, September 14, 13

6. Features
Variables
Mixins
Functions
Nesting
Inheritance
Saturday, September 14, 13

7. CSS pre-
processor
Saturday, September 14, 13

8. style.scss
style.css
Saturday, September 14, 13

9. Getting
Started
Saturday, September 14, 13

10. Ruby Gem
sass-lang.com/
download.html
Saturday, September 14, 13

11. Hammer
hammerformac.com
Saturday, September 14, 13

12. Ready to
Code!
Saturday, September 14, 13

13. Variables
constants
Saturday, September 14, 13

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

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

16. Numbers
1.2
13
10px
Saturday, September 14, 13

17. Strings
“foo”
‘bar’
baz
Saturday, September 14, 13

18. Colors
blue
#04a3f9
Saturday, September 14, 13

19. Booleans
true
false
Saturday, September 14, 13

20. nulls
null
Saturday, September 14, 13

21. Lists
1.5em 1em 0 2em
Helvetica, Arial, ...
Saturday, September 14, 13

22. Mixins
reusable code
blocks
Saturday, September 14, 13

23. Declare Mixin
@mixin centered {
display:block;
margin-left:auto;
margin-right:auto;
}
Saturday, September 14, 13

24. Use Mixin
img {
@include: centered;
}
Saturday, September 14, 13

25. Vendor Prefix
@mixin border-radius {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
Saturday, September 14, 13

26. Vendor Prefix
@mixin border-radius {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
Saturday, September 14, 13

27. Better...
@mixin border-radius {
$radius: 5px;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
Saturday, September 14, 13

28. Arguments
@mixin border-radius ($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
Saturday, September 14, 13

29. Using Args
img {
@include border-radius(20px);
}
Saturday, September 14, 13

30. Arg Defaults
@mixin border-radius ($rad: 5px)
{
-moz-border-radius: $rad;
-webkit-border-radius: $rad;
border-radius: $rad;
}
Saturday, September 14, 13

31. Using Defaults
img {
@include border-radius;
}
Saturday, September 14, 13

32. Simplicity
@mixin drop-shadow ($args) {
-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, September 14, 13

33. Readability
@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;
}
Saturday, September 14, 13

34. Functions
colors, math,
& more
Saturday, September 14, 13

35. Color Functions
rgb, rgba/hsl, hsla
lighten/darken
complement, invert
opacify, transparentize
... & more!
Saturday, September 14, 13

36. Color Functions
rgb, rgba/hsl, hsla
lighten/darken
complement, invert
opacify, transparentize
... & more!
Saturday, September 14, 13

37. Color Functions
rgb, rgba/hsl, hsla
lighten/darken
complement, invert
opacify, transparentize
... & more!
Saturday, September 14, 13

38. Color Functions
rgb, rgba/hsl, hsla
lighten/darken
complement, invert
opacify, transparentize
... & more!
Saturday, September 14, 13

39. Color Functions
rgb, rgba/hsl, hsla
lighten/darken
complement, invert
opacify, transparentize
... & more!
Saturday, September 14, 13

40. Function Use
h1 {
color:lighten($main-color, 20%);
}
h2 {
color:complement($main-color);
}
Saturday, September 14, 13

41. Basic Math
.border {
margin:$margin;
padding: $margin/2;
}
Saturday, September 14, 13

42. Math Functions
percentage
round, ceil, floor
min, max
abs
Saturday, September 14, 13

43. More Functions
http://sass-lang.com/
docs/yardoc/Sass/
Script/Functions.html
Saturday, September 14, 13

44. Nesting
keep like
with like
Saturday, September 14, 13

45. Before
a {
color: $link-color;
}
a:hover {
color: $link-hover-color;
}
Saturday, September 14, 13

46. Nesting
a {
color: $link-color;
&:hover {
color: $link-hover-color;
}
}
Saturday, September 14, 13

47. More Nesting
#nav {
a {
color:$nav-color;
&:hover {
color: $nav-hover-color;
}
}
}
Saturday, September 14, 13

48. Inheritance
avoid duplication
Saturday, September 14, 13

49. Inheritance
.error {
background: #fdd;
}
.badError {
@extend .error;
border-width: 3px;
}
Saturday, September 14, 13

50. Comments
// get removed
/* stay around */
Saturday, September 14, 13

51. Bourbon
A simple and lightweight mixin library for Sass.
bourbon.io
Saturday, September 14, 13

52. Bourbon Neat
A lightweight semantic grid
framework for Sass and Bourbon.
neat.bourbon.io/
Saturday, September 14, 13

53. Dank!
Kathryn Rotondo
kathrynrotondo.com
@krotondo
This work is licensed under
http://creativecommons.org/licenses/by-nc-sa/3.0
Saturday, September 14, 13