Sass, Compass and the new tools - Open Web Camp IV

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

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

“CSS3 is awesome! Browserscan 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

http://livereload.com/

“The Web Developer Wonderland (a happy land where browsers dont 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, thebrowser is updated instantly without reloading the page.” -- the Livereload website

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

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

wait a second...

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

http://sass-lang.com/

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

$ gem install sass

$ sudo gem install sass

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

Mixins!

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

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

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

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

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

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

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

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

http://sass-lang.com/docs/yardoc/ﬁle.SASS_REFERENCE.html#interpolation_

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

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

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

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

wait - I never have towrite preﬁxes again? Ever?

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

Nesting!

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

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

Variables!

deﬁne 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; }}

built in functions!

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

calculate!

Boundary of the content containerheight 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!/* 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;}

@import

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

combine them instead ofloading 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; }

http://compass-style.org/

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

“Compass is an excellent set ofready made and well documentedCSS3 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

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

/* 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,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhYzM2MyIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjY2Q4YzE0Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOWM0Y2MyIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g); 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;}

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

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

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

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

helpers

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

please welcome the others:

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

SASS ultimately won out because its the most mature, easiest to ﬁnd information and help about, seems to have the most active and robustdevelopment, and has the least bugs. -- Chris Coyier, just recently http://css-tricks.com/musings-on-preprocessing/

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

http://webprofessionals.org	807
http://lanyrd.com	16
http://eventifier.co	10
http://feeds2.feedburner.com	10
https://si0.twimg.com	7
https://twimg0-a.akamaihd.net	6
http://translate.googleusercontent.com	2
http://us-w1.rockmelt.com	1
http://feeds.feedburner.com	1
http://coderwall.com	1

Sass, Compass and the new tools - Open Web Camp IV

by Dirk Ginader on Jul 14, 2012

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 861

Statistics

Sass, Compass and the new tools - Open Web Camp IV Presentation Transcript