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