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 8 lines of CSS to
create 1 simple cross
browser gradient is a PITA...
-- everybody, all the time

11. .box_gradient {
// Old browsers
background: black;
// FF3.6+
background: -moz-linear-gradient(top, black 0%, white 100%);
// Chrome,Safari4+
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, black), color-stop(100%, white));
// Chrome10+,Safari5.1+
background: -webkit-linear-gradient(top, black 0%, white 100%);
// Opera 11.10+
background: -o-linear-gradient(top, black 0%, white 100%);
// IE10+
background: -ms-linear-gradient(top, black 0%, white 100%);
// W3C standard
background: linear-gradient(to bottom, black 0%, white 100%);
// IE6-9
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='black',endColorstr='white',GradientType=0);
}

12. wait a second...

13. http://incident57.com/codekit/

14. Codekit != Livereload
• Does almost the same • BUT:
• compiles all the CSS • it only auto reloads
Preprocessors webkit browsers on
your Mac (it controls
• Lints your Javascript them using
AppleScript
• optimizes your Images
• no Firefox or Opera
• combo handles your
CSS and Javascript • no mobile Devices ;-(

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

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

17. “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

18. $ gem install sass

20. $ sudo gem install sass

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

22. Mixins!

23. 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;
}

24. $ sass --watch style.scss:style.css
you don’t need that thanks to Livereload :-)

25. $ sass --watch my/sass:my/css
you don’t need that thanks to Livereload :-)

26. 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);
}

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

28. /* style.scss */
@mixin linear-gradient($from, $to){
! // Old browsers
! background: $from;
! // FF3.6+
! background: -moz-linear-gradient(top, $from 0%, $to 100%);
! // Chrome,Safari4+
! background: -webkit-gradient(linear, left top, left bottom,
! ! ! ! ! color-stop(0%, $from), color-stop(100%, $to));
! // Chrome10+,Safari5.1+
! background: -webkit-linear-gradient(top, $from 0%, $to 100%);
! // Opera 11.10+
! background: -o-linear-gradient(top, $from 0%, $to 100%);
! // IE10+
! background: -ms-linear-gradient(top, $from 0%, $to 100%);
! // W3C standard
! background: linear-gradient(to bottom, $from 0%, $to 100%);
! // IE6-9
! filter: progid:DXImageTransform.Microsoft.gradient(
! ! startColorstr='$from',
! ! endColorstr='$to',GradientType=0
! );
}

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

30. /* style.scss */
.box_gradient{
! // Old browsers
! background: #444;
! // FF3.6+
! background: -moz-linear-gradient(top, #444 0%, #999 100%);
! // Chrome,Safari4+
! background: -webkit-gradient(linear, left top, left bottom,
! ! ! ! ! color-stop(0%, #444), color-stop(100%, #999));
! // Chrome10+,Safari5.1+
! background: -webkit-linear-gradient(top, #444 0%, #999 100%);
! // Opera 11.10+
! background: -o-linear-gradient(top, #444 0%, #999 100%);
! // IE10+
! background: -ms-linear-gradient(top, #444 0%, #999 100%);
! // W3C standard
! background: linear-gradient(to bottom, #444 0%, #999 100%);
! // IE6-9
! filter: progid:DXImageTransform.Microsoft.gradient(
! ! ! ! startColorstr='$from',
! ! ! ! endColorstr='$to',GradientType=0
! ! ! );
}

31. /* style.scss */
.box_gradient{
! // Old browsers
! background: #444;
! // FF3.6+
! background: -moz-linear-gradient(top, #444 0%, #999 100%);
! // Chrome,Safari4+
! background: -webkit-gradient(linear, left top, left bottom,
! ! ! ! ! color-stop(0%, #444), color-stop(100%, #999));
! // Chrome10+,Safari5.1+
! background: -webkit-linear-gradient(top, #444 0%, #999 100%);
! // Opera 11.10+
! background: -o-linear-gradient(top, #444 0%, #999 100%);
! // IE10+
! background: -ms-linear-gradient(top, #444 0%, #999 100%);
! // W3C standard
! background: linear-gradient(to bottom, #444 0%, #999 100%);
! // IE6-9
! filter: progid:DXImageTransform.Microsoft.gradient(
! ! ! ! startColorstr='$from',
! ! ! ! endColorstr='$to',GradientType=0
! ! ! );
}

32. /* style.scss */
.box_gradient{
! // Old browsers
! background: #444;
! // FF3.6+
! background: -moz-linear-gradient(top, #444 0%, #999 100%);
! // Chrome,Safari4+
! background: -webkit-gradient(linear, left top, left bottom,
! ! ! ! ! color-stop(0%, #444), color-stop(100%, #999));
! // Chrome10+,Safari5.1+
! background: -webkit-linear-gradient(top, #444 0%, #999 100%);
! // Opera 11.10+
! background: -o-linear-gradient(top, #444 0%, #999 100%);
! // IE10+
! background: -ms-linear-gradient(top, #444 0%, #999 100%);
! // W3C standard
! background: linear-gradient(to bottom, #444 0%, #999 100%);
! // IE6-9
! filter: progid:DXImageTransform.Microsoft.gradient(
! ! ! ! startColorstr='$from',
! ! ! ! endColorstr='$to',GradientType=0
! ! ! );
}

33. /* style.scss */
.box_gradient{
! // Old browsers
! background: #444;
! // FF3.6+
! background: -moz-linear-gradient(top, #444 0%, #999 100%);
! // Chrome,Safari4+
! background: -webkit-gradient(linear, left top, left bottom,
! ! ! ! ! color-stop(0%, #444), color-stop(100%, #999));
! // Chrome10+,Safari5.1+
! background: -webkit-linear-gradient(top, #444 0%, #999 100%);
! // Opera 11.10+
! background: -o-linear-gradient(top, #444 0%, #999 100%);
! // IE10+
! background: -ms-linear-gradient(top, #444 0%, #999 100%);
! // W3C standard
! background: linear-gradient(to bottom, #444 0%, #999 100%);
! // IE6-9
! filter: progid:DXImageTransform.Microsoft.gradient(
! ! ! ! startColorstr='$from',
! ! ! ! endColorstr='$to',GradientType=0
! ! ! );
}

34. /* style.scss */
.box_gradient{
! // Old browsers
! background: #444;
! // FF3.6+
! background: -moz-linear-gradient(top, #444 0%, #999 100%);
! // Chrome,Safari4+
! background: -webkit-gradient(linear, left top, left bottom,
! ! ! ! ! color-stop(0%, #444), color-stop(100%, #999));
! // Chrome10+,Safari5.1+
! background: -webkit-linear-gradient(top, #444 0%, #999 100%);
! // Opera 11.10+
! background: -o-linear-gradient(top, #444 0%, #999 100%);
! // IE10+
! background: -ms-linear-gradient(top, #444 0%, #999 100%);
! // W3C standard
! background: linear-gradient(to bottom, #444 0%, #999 100%);
! // IE6-9
! filter: progid:DXImageTransform.Microsoft.gradient(
! ! ! ! startColorstr='$from',
! ! ! ! endColorstr='$to',GradientType=0
! ! ! );
}

35. /* style.scss */
.box_gradient{
! // Old browsers
! background: #444;
! // FF3.6+
! background: -moz-linear-gradient(top, #444 0%, #999 100%);
! // Chrome,Safari4+
! background: -webkit-gradient(linear, left top, left bottom,
! ! ! ! ! color-stop(0%, #444), color-stop(100%, #999));
! // Chrome10+,Safari5.1+
! background: -webkit-linear-gradient(top, #444 0%, #999 100%);
! // Opera 11.10+
! background: -o-linear-gradient(top, #444 0%, #999 100%);
! // IE10+
! background: -ms-linear-gradient(top, #444 0%, #999 100%);
! // W3C standard
! background: linear-gradient(to bottom, #444 0%, #999 100%);
! // IE6-9
! filter: progid:DXImageTransform.Microsoft.gradient(
! ! ! ! startColorstr='$from',
! ! ! ! endColorstr='$to',GradientType=0
! ! ! );
}

36. /* style.scss */
.box_gradient{
! // Old browsers
! background: #444;
! // FF3.6+
! background: -moz-linear-gradient(top, #444 0%, #999 100%);
! // Chrome,Safari4+
! background: -webkit-gradient(linear, left top, left bottom,
! ! ! ! ! color-stop(0%, #444), color-stop(100%, #999));
! // Chrome10+,Safari5.1+
! background: -webkit-linear-gradient(top, #444 0%, #999 100%);
! // Opera 11.10+
! background: -o-linear-gradient(top, #444 0%, #999 100%);
! // IE10+
! background: -ms-linear-gradient(top, #444 0%, #999 100%);
! // W3C standard
! background: linear-gradient(to bottom, #444 0%, #999 100%);
! // IE6-9
! filter: progid:DXImageTransform.Microsoft.gradient(
! ! ! ! startColorstr='$from',
! ! ! ! endColorstr='$to',GradientType=0
! ! ! );
}

37. /* style.scss */
.box_gradient{
! // Old browsers
! background: #444;
! // FF3.6+
! background: -moz-linear-gradient(top, #444 0%, #999 100%);
! // Chrome,Safari4+
! background: -webkit-gradient(linear, left top, left bottom,
! ! ! ! ! color-stop(0%, #444), color-stop(100%, #999));
! // Chrome10+,Safari5.1+
! background: -webkit-linear-gradient(top, #444 0%, #999 100%);
! // Opera 11.10+
! background: -o-linear-gradient(top, #444 0%, #999 100%);
! // IE10+
! background: -ms-linear-gradient(top, #444 0%, #999 100%);
! // W3C standard
! background: linear-gradient(to bottom, #444 0%, #999 100%);
! // IE6-9
! filter: progid:DXImageTransform.Microsoft.gradient(
! ! ! ! startColorstr='$from',
! ! ! ! endColorstr='$to',GradientType=0
! ! ! );
}

38. /* style.scss */
.box_gradient{
! // Old browsers
! background: #444;
! // FF3.6+
! background: -moz-linear-gradient(top, #444 0%, #999 100%);
! // Chrome,Safari4+
! background: -webkit-gradient(linear, left top, left bottom,
! ! ! ! ! color-stop(0%, #444), color-stop(100%, #999));
! // Chrome10+,Safari5.1+
! background: -webkit-linear-gradient(top, #444 0%, #999 100%);
! // Opera 11.10+
! background: -o-linear-gradient(top, #444 0%, #999 100%);
! // IE10+
! background: -ms-linear-gradient(top, #444 0%, #999 100%);
! // W3C standard
! background: linear-gradient(to bottom, #444 0%, #999 100%);
! // IE6-9
! filter: progid:DXImageTransform.Microsoft.gradient(
HUH?
! ! ! ! startColorstr='$from',
! ! ! ! endColorstr='$to',GradientType=0
! ! ! );
}

40. http://dir.kg/sass.interpolation

41. /* style.scss */
@mixin linear-gradient($from, $to){
! // Old browsers
! background: $from;
! // FF3.6+
! background: -moz-linear-gradient(top, $from 0%, $to 100%);
! // Chrome,Safari4+
! background: -webkit-gradient(linear, left top, left bottom,
! ! ! ! ! color-stop(0%, $from), color-stop(100%, $to));
! // Chrome10+,Safari5.1+
! background: -webkit-linear-gradient(top, $from 0%, $to 100%);
! // Opera 11.10+
! background: -o-linear-gradient(top, $from 0%, $to 100%);
! // IE10+
! background: -ms-linear-gradient(top, $from 0%, $to 100%);
! // W3C standard
! background: linear-gradient(to bottom, $from 0%, $to 100%);
! // IE6-9
! filter: progid:DXImageTransform.Microsoft.gradient(
! ! startColorstr='#{$from}',
! ! endColorstr='#{$to}',GradientType=0
! );
}

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

43. /* style.css */
.box_gradient{
! // Old browsers
! background: #444;
! // FF3.6+
! background: -moz-linear-gradient(top, #444 0%, #999 100%);
! // Chrome,Safari4+
! background: -webkit-gradient(linear, left top, left bottom,
! ! ! ! ! color-stop(0%, #444), color-stop(100%, #999));
! // Chrome10+,Safari5.1+
! background: -webkit-linear-gradient(top, #444 0%, #999 100%);
! // Opera 11.10+
! background: -o-linear-gradient(top, #444 0%, #999 100%);
! // IE10+
! background: -ms-linear-gradient(top, #444 0%, #999 100%);
! // W3C standard
! background: linear-gradient(to bottom, #444 0%, #999 100%);
! // IE6-9
! filter: progid:DXImageTransform.Microsoft.gradient(
! ! ! ! startColorstr='#444',
! ! ! ! endColorstr='#999',GradientType=0
! ! ! );
}

44. /* style.css */
.box_gradient{
! // Old browsers
! background: #444;
! // FF3.6+
! background: -moz-linear-gradient(top, #444 0%, #999 100%);
! // Chrome,Safari4+
! background: -webkit-gradient(linear, left top, left bottom,
! ! ! ! ! color-stop(0%, #444), color-stop(100%, #999));
! // Chrome10+,Safari5.1+
! background: -webkit-linear-gradient(top, #444 0%, #999 100%);
! // Opera 11.10+
! background: -o-linear-gradient(top, #444 0%, #999 100%);
! // IE10+
! background: -ms-linear-gradient(top, #444 0%, #999 100%);
! // W3C standard
! background: linear-gradient(to bottom, #444 0%, #999 100%);
! // IE6-9
! filter: progid:DXImageTransform.Microsoft.gradient(
! ! ! ! startColorstr='#444',
! ! ! ! endColorstr='#999',GradientType=0
! ! ! );
}

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

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

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

49. Nesting!

50. 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; }
}

51. 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;
}
}
}

53. 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; }

54. Variables!

55. 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;
}
}

56. built in functions!

57. 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%);
}
}

58. calculate!

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

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

62. 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;
}

63. @import

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

66. 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; }

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

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

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

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

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

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

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

78. http://dir.kg/box.ftw

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

80. /* 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;
}

81. http://dir.kg/ultimate

82. http://csshat.com/

83. 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;
}

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

85. 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;
}

86. helpers

87. 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;
}
...

89. @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);
}

90. @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);
}

92. .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;
}
...

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

94. That’s nice and all but
now I can’t debug my
CSS in the Inspector
anymore, right?

95. FireSass for Firefox
http://dir.kg/firesass

96. Sass-Sleuth for Webkits
http://dir.kg/sass-sleuth

97. needs --debug-info
/* config.rb */
sass_options = {:debuginfo => true}
@media -sass-debug-info{filename{font-family:file:/
//Users/user/Documents/project/src/scss/
_defaults.scss}line{font-family:00003213}}
#x-main hr {
height: 1px;
margin: 36px 0;
background-color: #e3e3e3;
border: 0;
}

99. please welcome
the others:

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

101. 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/

103. thank you :-)
•http://dir.kg/me
•http://dir.kg/twitter
•http://dir.kg/github
•http://dir.kg/slides
Wanna play with a the new toys?
I’m looking for a new teammate!
•http://dir.kg/job