HTML5 Dev Conf - Sass, Compass & the new Webdev tools

Dirk Ginader | Yahoo! Inc.

Sass, Compass &
the new Webdev tools

@ginader

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

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

“Damn!
writing all those Browser
preﬁxes is tedious...”
-- me, immediately afterwards

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

“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

“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

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

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

http://incident57.com/codekit/

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 ;-(

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

“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

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

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

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

you don’t need that thanks to Livereload :-)

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

you don’t need that thanks to Livereload :-)

becomes
/* style.css */

}

.another-box-with-same-gradient {
}

Mixins can have Params
/* style.scss */

@mixin linear-gradient($from, $to) {
background-image: linear-gradient(top, $from, $to);
}

/* 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
! );
}

/* style.scss */

.box_gradient {
@include linear-gradient(#444444, #999999);
}

/* style.scss */
.box_gradient{
! // Old browsers
! background: #444;
! // FF3.6+
! background: -moz-linear-gradient(top, #444 0%, #999 100%);
! ! ! ! ! color-stop(0%, #444), color-stop(100%, #999));
! 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
! ! ! ! startColorstr='$from',
! ! ! ! endColorstr='$to',GradientType=0
! ! ! );
}

/* style.scss */
.box_gradient{
! // Old browsers
! background: #444;
! // FF3.6+
! // Opera 11.10+
! // IE10+
! // W3C standard
! // IE6-9

HUH?
! ! ! ! startColorstr='$from',
! ! ! ! endColorstr='$to',GradientType=0
! ! ! );
}

http://dir.kg/sass.interpolation

/* style.scss */
@mixin linear-gradient($from, $to){
! // Old browsers
! background: $from;
! // FF3.6+
! background: -moz-linear-gradient(top, $from 0%, $to 100%);
! ! ! ! ! color-stop(0%, $from), color-stop(100%, $to));
! 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
! ! startColorstr='#{$from}',
! ! endColorstr='#{$to}',GradientType=0
! );
}

/* style.css */
.box_gradient{
! // Old browsers
! background: #444;
! // FF3.6+
! // Opera 11.10+
! // IE10+
! // W3C standard
! // IE6-9
! ! ! ! startColorstr='#444',
! ! ! ! endColorstr='#999',GradientType=0
! ! ! );
}

write once and reuse
/* style.scss */

@include linear-gradient(#444444, #999999);
}

.box-with-another-gradient {
@include linear-gradient(#000, #fff);
}

wait - I never have to
write preﬁxes again?
Ever?

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

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

even properties
are nestable!
.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;
}
}
}

use the & (parent reference)
i.e. for pseudoclasses
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; }

deﬁne standard settings and
reuse across your project
#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;
}
}

modify and transform
$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%);
}
}

Boundary of the content container

height width

margin padding
border

the Box Model
content area width
+ left padding
+ right padding
+ left border
+ right border

= total box width

calculate the s**t out
of the Box Model!
.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;
}

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

combine them instead of
loading one after the other!
.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; }

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

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

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

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

CSS3 mixins
• Appearance • Flexbox

• Background Clip • Box Shadow

• Background Origin • Box Sizing

• Background Size • Columns

• Border Radius • Filter

CSS3 mixins
• Font Face • CSS Regions

• Hyphenation • Text Shadow

• Gradients • Transform

• Inline Block • Transition

• Opacity

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

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

best practices built in
.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;
}

.box{ .box {
! @include clearfix; overflow: hidden;
} *zoom: 1;
}


.other-box{ .other-box {
! @include pie-clearfix; *zoom: 1;
} }
.other-box:after {
content: "";
display: table;
clear: both;
}

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

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

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

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

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

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

FireSass for Firefox

http://dir.kg/ﬁresass

Sass-Sleuth for Webkits

http://dir.kg/sass-sleuth

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

please welcome
the others:

• Less:
http://lesscss.org
• Stylus:
http://learnboost.github.com/stylus/

SASS ultimately won out because it's
the most mature, easiest to ﬁnd
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/

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

HTML5 Dev Conf - Sass, Compass & the new Webdev tools

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to HTML5 Dev Conf - Sass, Compass & the new Webdev tools

Similar to HTML5 Dev Conf - Sass, Compass & the new Webdev tools (20)

More from Dirk Ginader

More from Dirk Ginader (16)

HTML5 Dev Conf - Sass, Compass & the new Webdev tools

Editor's Notes