This document discusses the author's experience with CSS preprocessors like Sass and tools like LiveReload. It begins by showing the author's initial skepticism of preprocessors but realization that writing browser prefixes manually is tedious. The author is then introduced to features of Sass like mixins, variables, and parameterization that allow writing CSS more efficiently and maintainably. Sass and tools like LiveReload are shown to automate tasks like prefixing and live reloading of pages on file changes.

1. Dirk Ginader | Yahoo! Inc.
SASS, Compass &
the new Webdev tools
@ginader

2. “CSS Precompilers are
useless. I don’t need them.
I can write CSS myself.”
-- me, early 2010

3. “CSS3 is awesome! Browsers
can now do rounded corners
and Everything!”
-- me, about the same time

4. “Damn!
writing all those Browser
prefixes is tedious...”
-- me, immediately afterwards

5. “WOAH! Livereload makes
me forget about ⌘R!”
-- me, mid 2011

7. http://livereload.com/

8. “The Web Developer Wonderland
(a happy land where browsers don't need a
Refresh button)
CSS edits and image changes apply live.
CoffeeScript, SASS, LESS and others just work.”
-- the Livereload website

9. “What does LiveReload do?
LiveReload monitors changes in the file system. As soon
as you save a file, it is preprocessed as needed, and the
browser is refreshed.
Even cooler, when you change a CSS file or an image, the
browser is updated instantly without reloading the page.”
-- the Livereload website

10. writing 9 lines of CSS to
create 1 simple cross
browser gradient is a PITA...
-- everybody, all the time

11. .box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#444444', endColorstr='#999999');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='#444444', endColorstr='#999999')";
}

12. wait a second...

13. well if it’s *THAT* easy
I could as well give
it a try, right?
me, after having seen this toggle countless times...

14. http://sass-lang.com/

15. “Sass makes CSS fun again. Sass is an extension of
CSS3, adding nested rules, variables, mixins,
selector inheritance, and more. It’s translated to
well-formatted, standard CSS using the command
line tool or a web-framework plugin.”
-- the Sass Website

16. $ gem install sass

18. $ sudo gem install sass

19. alright - let’s see what
this can do...

20. Mixins!

21. reusable chunks of code
/* style.scss */
@mixin linear-gradient {
background-image: linear-gradient(top, #444, #999);
}
.box-with-gradient {
@include linear-gradient;
}
.another-box-with-same-gradient {
@include linear-gradient;
}

22. $ sass --watch style.scss:style.css

23. $ sass --watch my/sass:my/css

24. becomes
/* style.css */
.box-with-gradient {
background-image: linear-gradient(top, #444, #999);
}
.another-box-with-same-gradient {
background-image: linear-gradient(top, #444, #999);
}

25. Mixins can have Params
/* style.scss */
@mixin linear-gradient($from, $to) {
background-image: linear-gradient(top, $from, $to);
}

26. /* style.scss */
@mixin linear-gradient($from, $to) {
background-color: $to;
background-image:
-webkit-gradient(linear,left top,left bottom,
color-stop(0, $from),color-stop(1, $to));
background-image:
-webkit-linear-gradient(top, $from, $to);
background-image:
-moz-linear-gradient(top, $from, $to);
background-image:
-ms-linear-gradient(top, $from, $to);
background-image:
-o-linear-gradient(top, $from, $to);
background-image:
linear-gradient(top, bottom, $from, $to);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to');
-ms-filter:
quote(progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to'));
}

27. /* style.scss */
.box_gradient {
@include linear-gradient(#444444, #999999);
}

28. /* style.css */
.box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to')";
}

29. /* style.css */
.box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to')";
}

30. /* style.css */
.box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to')";
}

31. /* style.css */
.box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to')";
}

32. /* style.css */
.box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to')";
}

33. /* style.css */
.box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to')";
}

34. /* style.css */
.box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to')";
}

35. /* style.css */
.box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to')";
}

36. /* style.css */
.box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to'); HUH?
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to')";
}

37. /* style.css */
.box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to'); HUH?
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='$from', endColorstr='$to')";HUH?
}

39. http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#interpolation_

40. /* style.scss */
@mixin linear-gradient($from, $to) {
background-color: $to;
background-image:
-webkit-gradient(linear,left top,left bottom,
color-stop(0, $from),color-stop(1, $to));
background-image:
-webkit-linear-gradient(top, $from, $to);
background-image:
-moz-linear-gradient(top, $from, $to);
background-image:
-ms-linear-gradient(top, $from, $to);
background-image:
-o-linear-gradient(top, $from, $to);
background-image:
linear-gradient(top, bottom, $from, $to);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#{$from}', endColorstr='#{$to}');
-ms-filter:
quote(progid:DXImageTransform.Microsoft.gradient(
startColorstr='#{$from}', endColorstr='#{$to}'));
}

41. /* style.scss */
.box_gradient {
@include linear-gradient(#444444, #999999);
}

42. /* style.css */
.box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#444444', endColorstr='#999999');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='#444444', endColorstr='#999999')";
}

43. /* style.css */
.box_gradient {
background-color: #999999;
background-image:
-webkit-gradient(linear, left top, left bottom,
color-stop(0, #444444), color-stop(1, #999999));
background-image:
-webkit-linear-gradient(top, #444444, #999999);
background-image:
-moz-linear-gradient(top, #444444, #999999);
background-image:
-ms-linear-gradient(top, #444444, #999999);
background-image:
-o-linear-gradient(top, #444444, #999999);
background-image:
linear-gradient(top, bottom, #444444, #999999);
filter:
progid:DXImageTransform.Microsoft.gradient(
startColorstr='#444444', endColorstr='#999999');
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
startColorstr='#444444', endColorstr='#999999')";
}

44. write once and reuse
/* style.scss */
.box-with-gradient {
@include linear-gradient(#444444, #999999);
}
.box-with-another-gradient {
@include linear-gradient(#000, #fff);
}

45. wait - I never have to
write prefixes again?
Ever?

47. Ok. I’m convinced -
what else do we have?

48. Nesting!

49. no more repetitive
selector writing!
/* style.scss */ /* style.css */
#navbar { #navbar {
width: 80%; width: 80%;
height: 23px; height: 23px; }
#navbar ul {
ul { list-style-type: none; } list-style-type: none; }
li { #navbar li {
float: left; float: left; }
a { font-weight: bold; } #navbar li a {
} font-weight: bold; }
}

50. even properties
are nestable!
/* style.scss */ /* style.css */
.fakeshadow { .fakeshadow {
border: { border-style: solid;
style: solid; border-left-width: 4px;
left: { border-left-color: #888;
width: 4px; border-right-width: 2px;
color: #888; border-right-color: #ccc; }
}
right: {
width: 2px;
color: #ccc;
}
}
}

52. use the & (parent reference)
i.e. for pseudoclasses
/* style.scss */ /* style.css */
a { a {
color: #ce4dd6; color: #ce4dd6; }
&:hover { color: #ffb3ff; } a:hover {
&:visited { color: #c458cb; } color: #ffb3ff; }
.module &{ a:visited {
!color: red; color: #c458cb; }
} .module a {
} color: red; }

53. Variables!

54. define standard settings and
reuse across your project
/* style.scss */ /* style.css */
#navbar {
$main-color: #ce4dd6; border-bottom-color: #ce4dd6;
$style: solid; border-bottom-style: solid; }
#navbar { a {
border-bottom: { color: #ce4dd6; }
color: $main-color; a:hover {
style: $style; border-bottom: solid 1px; }
}
}
a {
color: $main-color;
&:hover {
border-bottom: $style 1px;
}
}

55. built in functions!

56. modify and transform
/* style.scss */ /* style.css */
$linkcolor: #ce4dd6; a {
color: #ce4dd6; }
a {
a:hover {
color: $linkcolor;
color: #f0c9f3; }
&:hover {
a:active {
color: lighten($linkcolor, 30%);
color: #6b1a70; }
}
&:active {
color: darken($linkcolor, 30%);
}
}

57. calculate!

58. Boundary of the content container
height width
margin padding
border

60. the Box Model
content area width
+ left padding
+ right padding
+ left border
+ right border
= total box width

61. calculate the s**t out
of the Box Model!
/* style.scss */ /* style.css */
.box {
$box-width : 100px; margin: 10px;
$box-border : 3px; padding: 10px;
$box-padding : 10px; border: 3px solid black;
$box-margin : 10px; width: 74px; }
.box{
! margin : $box-margin;
! padding : $box-padding;
! border: $box-border solid black;
! width : $box-width
! ! ! - $box-border * 2
! ! ! - $box-padding * 2;
}

62. @import

63. @import?
isn’t that in CSS already?
Yes it is - but...

65. combine them instead of
loading one after the other!
/* style.scss */ /* style.css */
.box {
@import 'box-model'; width: 74px;
@import 'calculate'; margin: 10px; }
@import 'function';
#navbar {
width: 800px; }
#navbar li {
float: left;
width: 150px; }
a {
color: #ce4dd6; }
a:hover {
color: #f0c9f3; }
a:active {
color: #6b1a70; }

67. http://compass-style.org/

68. “Compass is an open-
source CSS Authoring
Framework.”
-- the Compass website

69. “Compass is an excellent set of
ready made and well documented
CSS3 mixins, functions and helpers
that make SASS more awesome”
-- me

70. $ sudo gem update --system
$ sudo gem install compass

72. $ cd <myproject>
$ compass install bare
$ compass watch

75. CSS3 mixins
• Appearance • Flexbox
• Background Clip • Box Shadow
• Background Origin • Box Sizing
• Background Size • Columns
• Border Radius • Filter

76. CSS3 mixins
• Font Face • CSS Regions
• Hyphenation • Text Shadow
• Gradients • Transform
• Inline Block • Transition
• Opacity

77. http://paulirish.com/2012/box-sizing-border-box-ftw/

78. /* style.scss */
.box{
$experimental-support-for-svg: true;
@include background-image(
!linear-gradient(
!! left,
!! #2ac363, #cd8c14, #9c4cc2
!)
);
width: 80px;
height: 80px;
}

79. /* style.css */
.box {
background-image: url('data:image/svg
+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2
ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM
+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblV
zZSIgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI
+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhYzM2MyIvPjxzdG9wIG9mZnNldD0
iNTAlIiBzdG9wLWNvbG9yPSIjY2Q4YzE0Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWN
vbG9yPSIjOWM0Y2MyIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM
+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJ
sKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-
stop(0%, #2ac363), color-stop(50%, #cd8c14), color-stop(100%, #9c4cc2));
background-image: -webkit-linear-gradient(left, #2ac363, #cd8c14,
#9c4cc2);
background-image: -moz-linear-gradient(left, #2ac363, #cd8c14,
#9c4cc2);
background-image: -o-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2);
background-image: -ms-linear-gradient(left, #2ac363, #cd8c14,
#9c4cc2);
background-image: linear-gradient(left, #2ac363, #cd8c14, #9c4cc2);
width: 80px;
height: 80px;
}

80. http://www.colorzilla.com/gradient-editor/

81. best practices built in
/* style.scss */ /* style.css */
.inline-box{ .inline-box {
! @include inline-block; display: -moz-inline-box;
} -moz-box-orient: vertical;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
}
.inline-box {
*display: inline;
}

82. best practices built in
/* style.scss */ /* style.css */
.box{ .box {
! @include clearfix; overflow: hidden;
} *zoom: 1;
}

83. best practices built in
/* style.scss */ /* style.css */
.other-box{ .other-box {
! @include pie-clearfix; *zoom: 1;
} }
.other-box:after {
content: "";
display: table;
clear: both;
}

84. helpers

85. did you *EVER* expect
Sprites to be fun?
@import "compass"; .icon-sprite, .icon-mail-attachment,
.icon-mail-delete, .icon-mail-reply {
@import "icon/*.png"; background:
url('../images/icon-s10b2c68b42.png')
@include all-icon-sprites; no-repeat;
}
.icon-mail-attachment {
background-position: -26px -2771px;
}
.icon-mail-delete {
background-position: -27px -2658px;
}
...

87. @import "compass";
$icon-spacing: 100px;
$icon-position: 50%;
@import "icon/*.png";
.attachment{
@include icon-sprite(mail-attachment);
}
.delete{
@include icon-sprite(mail-delete);
}
.reply{
@include icon-sprite(mail-reply);
}

88. @import "compass";
$icon-layout: diagonal;
@import "icon/*.png";
.attachment{
@include icon-sprite(mail-attachment);
}
.delete{
@include icon-sprite(mail-delete);
}
.reply{
@include icon-sprite(mail-reply);
}

90. .attachment{ .attachment {
background: background: url('data:image/
inline-image( png;base64,iVBORw0KGgoAAAANSUh
'icon/mail-attachment.png' EUgAAAA0AAAAOBAMAAAAGUYvhAAAAA
) no-repeat; 3NCSVQICAjb4U/gAAAAHlBMVEX///
} 8AAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAACGjDitAAAACnRSTlMAESIzRF
Vmd4iZu4Nz1gAAAAlwSFlzAAALEgAA
CxIB0t1+/
AAAABR0RVh0Q3JlYXRpb24gVGltZQA
0LzQvMTI1uCR/
AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZS
BGaXJld29ya3MgQ1M0BrLToAAAAFNJ
REFUCJljYAACjWkCIIqpRSwBzDVgLg
BxGwTEA0Bc9sAyMLdMPAHMTSxjhHKb
GBg4DAvLOBQYGNQZ1EFcBg2gEJDLwG
HAAuIyMJangg1nYARTACNTDXDO7nbI
AAAAAElFTkSuQmCC') no-repeat;
}
...

91. li{
! padding-left:
image-width(
'icon/mail-attachment.png'
) + 10;
! background-repeat:no-repeat;
}

93. please welcome
the others:

94. please welcome
the others:
• Less:
http://lesscss.org
• Stylus:
http://learnboost.github.com/stylus/

95. SASS ultimately won out because it's
the most mature, easiest to find
information and help about, seems
to have the most active and robust
development, and has the least bugs.
-- Chris Coyier, just recently
http://css-tricks.com/musings-on-preprocessing/

97. thank you ;-)
•http://ginader.com
•http://twitter.com/ginader
•http://github.com/ginader
•http://www.slideshare.net/ginader
•http://speakerrate.com/speakers/
225-ginader