From Aaron Bushnell: You never know if you'll like something until you try it. That's why I recommend trying Sass for your CSS coding. Using the DRY method (Don't Repeat Yourself), Sass makes your coding easy, quick, and beautiful.

1. The Ever-Expanding Interwebz
or “why you need to try guacamole”

2. The guacamole mystery

3. The guacamole mystery
• It wasn’t until I actually tried guacamole that I realized I
loved the stuff.

4. The guacamole mystery
• It wasn’t until I actually tried guacamole that I realized I
loved the stuff.
• The point is, the internet community introduces a new thing
every week, maybe every day.

5. The guacamole mystery
• It wasn’t until I actually tried guacamole that I realized I
loved the stuff.
• The point is, the internet community introduces a new thing
every week, maybe every day.
• Trying new methods in our craft is vital.

6. The guacamole mystery
• It wasn’t until I actually tried guacamole that I realized I
loved the stuff.
• The point is, the internet community introduces a new thing
every week, maybe every day.
• Trying new methods in our craft is vital.
• We stay ahead of the curve

7. The guacamole mystery
• It wasn’t until I actually tried guacamole that I realized I
loved the stuff.
• The point is, the internet community introduces a new thing
every week, maybe every day.
• Trying new methods in our craft is vital.
• We stay ahead of the curve
• We could save time

8. The guacamole mystery
• It wasn’t until I actually tried guacamole that I realized I
loved the stuff.
• The point is, the internet community introduces a new thing
every week, maybe every day.
• Trying new methods in our craft is vital.
• We stay ahead of the curve
• We could save time
• Worst case scenario: method doesn’t
work and we move on to something else

9. The guacamole mystery
• It wasn’t until I actually tried guacamole that I realized I
loved the stuff.
• The point is, the internet community introduces a new thing
every week, maybe every day.
• Trying new methods in our craft is vital.
• We stay ahead of the curve
• We could save time
• Worst case scenario: method doesn’t
work and we move on to something else
• It’s just plain fun!

11. What is Sass?

12. What is Sass?
It’s just plain ol’ CSS

14. On ‘ROIDS!

15. Seriously though. Sass...

16. Seriously though. Sass...
• Is an extension of CSS to utilize the DRY principle. (Don’t
repeat yourself)

17. Seriously though. Sass...
• Is an extension of CSS to utilize the DRY principle. (Don’t
repeat yourself)
• Repeating yourself makes more work for you and makes
the site load slower. That makes clients, users, and us sad.

18. Seriously though. Sass...
• Is an extension of CSS to utilize the DRY principle. (Don’t
repeat yourself)
• Repeating yourself makes more work for you and makes
the site load slower. That makes clients, users, and us sad.
• Is compiled on-the-fly through the command line or
through a GUI application.

19. Seriously though. Sass...
• Is an extension of CSS to utilize the DRY principle. (Don’t
repeat yourself)
• Repeating yourself makes more work for you and makes
the site load slower. That makes clients, users, and us sad.
• Is compiled on-the-fly through the command line or
through a GUI application.
• Most importantly, has room for growth and allows us to
make better websites much faster.

20. Okay, cool. What’s different?

21. Okay, cool. What’s different?
• You don’t need to change anything you know about CSS.
You can use the same syntax and be on your merry way.

22. Okay, cool. What’s different?
• You don’t need to change anything you know about CSS.
You can use the same syntax and be on your merry way.
• On-the-fly minification. Let the compiler do the work for
you and minify your code.

23. Okay, cool. What’s different?
• You don’t need to change anything you know about CSS.
You can use the same syntax and be on your merry way.
• On-the-fly minification. Let the compiler do the work for
you and minify your code.
• The compiler has numerous configuration settings to make
your CSS hotter than flapjacks.

24. Okay, cool. What’s different?
• You don’t need to change anything you know about CSS.
You can use the same syntax and be on your merry way.
• On-the-fly minification. Let the compiler do the work for
you and minify your code.
• The compiler has numerous configuration settings to make
your CSS hotter than flapjacks.
• New features like variables, nestings, mixins, selector
inheritance, and color modification.

25. Variables

26. Variables
Change it once and for all.
$mainColor: #FF6600; h1 {
color: #FF6600;
h1 { }
color: $mainColor;
}

27. Variables
Change it once and for all.
$mainColor: #FFCC00; h1 {
color: #FFCC00;
h1 { }
color: $mainColor;
}

28. Variables

29. Variables
Mathematics, good sir!
h1 { h1 {
margin: (16px / 2); margin: 8px;
width: (200px * 4); width: 800px;
} }

30. Variables

31. Variables
Combine you crazy developer, you!
$wrapper: 960px; h1 {
margin: 8px;
h1 { width: 480px;
margin: (16px / 2); }
width: $wrapper / 2;
}

32. Nesting

33. Nesting
#stop .doing .this #stuff > .okay?
.sidebar { .sidebar {
width: 500px; width: 500px;
h1 { }
color: blue; .sidebar h1 {
} color: blue;
} }

34. Nesting

35. Nesting
Don’t go overboard, though.
Your styles should NOT be location dependent.

36. Nesting
Don’t go overboard, though.
Your styles should NOT be location dependent.
Use wisely and with intention.

37. Mixins

38. Mixins
Recycle, reduce, and argue?
@mixin rounded($radius) { .box {
-moz-border-radius: $radius; -moz-border-radius: 10px;
border-radius: $radius; border-radius: 10px;
} }
.box {
@include rounded(10px);
}

39. Mixins
Arguments are great to keep your CSS
from repeating yourself.

40. Selector Inheritance

41. Selector Inheritance
Inherit other properties without duplication
.message { .message, .error {
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
} }
.error {
@extend .message; .error {
color: red; color: red;
} }

42. Colors

43. Colors
The prism meets the english teacher
h1 { h1 {
background: lighten(#CC0, 25%); background: #ffff4d;
color: darken(#FFCC00, 10%); color: #cca300;
} }
h2 { h2 {
background: desaturate(red, 15%); background: #ec1313;
color: saturate(#855, 20%); color: #9e3f3f;
} }

44. Colors

45. Colors
Many, many more like:

46. Colors
Many, many more like:
hue

47. Colors
Many, many more like:
hue
invert

48. Colors
Many, many more like:
hue
invert
complement

49. Colors
Many, many more like:
hue
invert
complement
grayscale

50. Colors
Many, many more like:
hue
invert
complement
grayscale
alpha

51. Colors
Many, many more like:
hue
invert
complement
grayscale
alpha
opacify?

52. Colors
Many, many more like:
hue
invert
complement
grayscale
alpha
opacify?
transparentize?!

53. Other Sass-y Things (Couldn’t help myself)

54. Other Sass-y Things (Couldn’t help myself)
• Sass commenting that isn’t compiled

55. Other Sass-y Things (Couldn’t help myself)
• Sass commenting that isn’t compiled
• // This won’t show up.

56. Other Sass-y Things (Couldn’t help myself)
• Sass commenting that isn’t compiled
• // This won’t show up.
• /* This will */

57. Other Sass-y Things (Couldn’t help myself)
• Sass commenting that isn’t compiled
• // This won’t show up.
• /* This will */
• Round numbers up or down. Because why not?

58. Other Sass-y Things (Couldn’t help myself)
• Sass commenting that isn’t compiled
• // This won’t show up.
• /* This will */
• Round numbers up or down. Because why not?
• @imports that actually import the CSS without making
another HTTP request.

59. Other Sass-y Things (Couldn’t help myself)
• Sass commenting that isn’t compiled
• // This won’t show up.
• /* This will */
• Round numbers up or down. Because why not?
• @imports that actually import the CSS without making
another HTTP request.
• This means you can create “partials”.

60. Other Sass-y Things (Couldn’t help myself)
• Sass commenting that isn’t compiled
• // This won’t show up.
• /* This will */
• Round numbers up or down. Because why not?
• @imports that actually import the CSS without making
another HTTP request.
• This means you can create “partials”.
• Numerous other features

61. Great! How do we use this thing?

62. Great! How do we use this thing?
• Your Sass sheets must be “watched” so they can be compiled
so you can do this two ways.

63. Great! How do we use this thing?
• Your Sass sheets must be “watched” so they can be compiled
so you can do this two ways.
• Command line. Not difficult, don’t be scared.

64. Great! How do we use this thing?
• Your Sass sheets must be “watched” so they can be compiled
so you can do this two ways.
• Command line. Not difficult, don’t be scared.
• Menu bar application (Compass.app ~$7)

65. Great! How do we use this thing?
• Your Sass sheets must be “watched” so they can be compiled
so you can do this two ways.
• Command line. Not difficult, don’t be scared.
• Menu bar application (Compass.app ~$7)
• More setup, but greater payoff. Don’t let new things scare
you.

66. Great! How do we use this thing?
• Your Sass sheets must be “watched” so they can be compiled
so you can do this two ways.
• Command line. Not difficult, don’t be scared.
• Menu bar application (Compass.app ~$7)
• More setup, but greater payoff. Don’t let new things scare
you.
• Caveat: Can’t have some of the team editing
.css docs on a project while the rest of the team
edits .scss/.sass files. It’s all or nothing

67. When can we start using this?

68. When can we start using this?
Today, silly!

69. When can we start using this?
Today, silly!
It just takes communication.

71. What is Compass?

72. What is Compass?
An open-source CSS authoring framework!

73. What is Compass?
An open-source CSS authoring framework!
(Sass with more features)

74. Features of Compass

75. Features of Compass
• Sass targets CSS while Compass targets CSS/HTML
workflow.

76. Features of Compass
• Sass targets CSS while Compass targets CSS/HTML
workflow.
• Compass makes repetitive bits of information easier to
repeat.

77. Features of Compass
• Sass targets CSS while Compass targets CSS/HTML
workflow.
• Compass makes repetitive bits of information easier to
repeat.
• Makes writing CSS3 easier and less pain-staking.

79. Quiz Time

80. Quiz Time
How many browser prefixes are there to
create a linear background gradient?

82. 4
5
6
7

83. 4
5
6
7

85. Using CSS3

86. Using CSS3
background: -moz-linear-gradient(top, #FFF 0%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-
stop(100%,#000));
background: -webkit-linear-gradient(top, #FFF 0%,#000 100%);
background: -o-linear-gradient(top, #FFF 0%,#000 100%);
background: -ms-linear-gradient(top, #FFF 0%,#000 100%);
background: linear-gradient(top, #FFF 0%,#000 100%);

88. Using Compass

89. Using Compass
@import "compass";
.box {
@include background(linear-gradient(#FFF, #000));
}

91. background: -moz-linear-gradient(top, #FFF 0%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#FFF), color-stop(100%,#000));
background: -webkit-linear-gradient(top, #FFF 0%,#000 100%);
background: -o-linear-gradient(top, #FFF 0%,#000 100%);
background: -ms-linear-gradient(top, #FFF 0%,#000 100%);
background: linear-gradient(top, #FFF 0%,#000 100%);

92. background: -moz-linear-gradient(top, #FFF 0%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#FFF), color-stop(100%,#000));
background: -webkit-linear-gradient(top, #FFF 0%,#000 100%);
background: -o-linear-gradient(top, #FFF 0%,#000 100%);
background: -ms-linear-gradient(top, #FFF 0%,#000 100%);
background: linear-gradient(top, #FFF 0%,#000 100%);
ta-da!

94. Border Radius with CSS3

95. Border Radius with CSS3
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;

97. Using Compass

98. Using Compass
@import "compass";
.box {
@include border-radius(10px);
}

100. -moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;

101. -moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
ta-da!

102. Other Compass Additions

103. Other Compass Additions
• @import “compass/reset” for Eric Meyer’s Reset

104. Other Compass Additions
• @import “compass/reset” for Eric Meyer’s Reset
• Can take multiple images, combine them into a sprite, and
give you classes and coordinates for each one. Insane.

105. Other Compass Additions
• @import “compass/reset” for Eric Meyer’s Reset
• Can take multiple images, combine them into a sprite, and
give you classes and coordinates for each one. Insane.
• Much, much more

106. We meet again, avocado

107. We meet again, avocado
• Technology is changing rapidly

108. We meet again, avocado
• Technology is changing rapidly
• We don’t have to use every new thing that hits the scenes,
but we should be trying new things out.

109. We meet again, avocado
• Technology is changing rapidly
• We don’t have to use every new thing that hits the scenes,
but we should be trying new things out.
• If it tastes delicious works out, great! If not, hey, we gave it a
shot and we learned something new anyway.

110. We meet again, avocado
• Technology is changing rapidly
• We don’t have to use every new thing that hits the scenes,
but we should be trying new things out.
• If it tastes delicious works out, great! If not, hey, we gave it a
shot and we learned something new anyway.
• Try something new and make something happen.