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  prefixes 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 imag...
“What does LiveReload do?LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as n...
writing 8 lines of CSS to   create 1 simple crossbrowser 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...
wait a second...
http://incident57.com/codekit/
Codekit != Livereload•   Does almost the same    •   BUT:•   compiles all the CSS        •   it only auto reloads    Prepr...
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, ...
$ 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-...
$ sass --watch style.scss:style.cssyou don’t need that thanks to Livereload :-)
$ sass --watch my/sass:my/cssyou don’t need that thanks to Livereload :-)
becomes/* style.css */.box-with-gradient {  background-image: linear-gradient(top, #444, #999);}.another-box-with-same-gra...
Mixins can have Params/* style.scss */@mixin linear-gradient($from, $to) {  background-image: linear-gradient(top, $from, ...
/* style.scss */@mixin linear-gradient($from, $to){! // Old browsers! background: $from;! // FF3.6+! background: -moz-line...
/* 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 ...
/* style.scss */.box_gradient{! // Old browsers! background: #444;! // FF3.6+! background: -moz-linear-gradient(top, #444 ...
/* style.scss */.box_gradient{! // Old browsers! background: #444;! // FF3.6+! background: -moz-linear-gradient(top, #444 ...
/* style.scss */.box_gradient{! // Old browsers! background: #444;! // FF3.6+! background: -moz-linear-gradient(top, #444 ...
/* style.scss */.box_gradient{! // Old browsers! background: #444;! // FF3.6+! background: -moz-linear-gradient(top, #444 ...
/* style.scss */.box_gradient{! // Old browsers! background: #444;! // FF3.6+! background: -moz-linear-gradient(top, #444 ...
/* style.scss */.box_gradient{! // Old browsers! background: #444;! // FF3.6+! background: -moz-linear-gradient(top, #444 ...
/* style.scss */.box_gradient{! // Old browsers! background: #444;! // FF3.6+! background: -moz-linear-gradient(top, #444 ...
/* style.scss */.box_gradient{! // Old browsers! background: #444;! // FF3.6+! background: -moz-linear-gradient(top, #444 ...
http://dir.kg/sass.interpolation
/* style.scss */@mixin linear-gradient($from, $to){! // Old browsers! background: $from;! // FF3.6+! background: -moz-line...
/* style.scss */.box_gradient {  @include linear-gradient(#444444, #999999);}
/* style.css */.box_gradient{! // Old browsers! background: #444;! // FF3.6+! background: -moz-linear-gradient(top, #444 0...
/* style.css */.box_gradient{! // Old browsers! background: #444;! // FF3.6+! background: -moz-linear-gradient(top, #444 0...
write once and reuse/* style.scss */.box-with-gradient {  @include linear-gradient(#444444, #999999);}.box-with-another-gr...
wait - I never have towrite prefixes again?         Ever?
Ok. I’m convinced -what else do we have?
Nesting!
no more repetitive          selector writing!/* style.scss */                    /* style.css */#navbar {                 ...
even properties         are nestable!/* style.scss */     /* style.css */.fakeshadow {        .fakeshadow {  border: {    ...
use the & (parent reference)    i.e. for pseudoclasses/* style.scss */                  /* style.css */a {                ...
Variables!
define standard settings and reuse across your project/* style.scss */                  /* style.css */                    ...
built in functions!
modify and transform/* style.scss */                       /* style.css */$linkcolor: #ce4dd6;                   a {      ...
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 */                       ...
@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 {...
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 awesom...
$ 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...
CSS3 mixins•   Font Face         •   CSS Regions•   Hyphenation       •   Text Shadow•   Gradients         •   Transform• ...
http://dir.kg/box.ftw
/* style.scss */.box{  $experimental-support-for-svg: true;  @include background-image(  !linear-gradient(  !! left,  !! #...
/* style.css */.box {  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4...
http://dir.kg/ultimate
http://csshat.com/
best practices built in/* style.scss */           /* style.css */.inline-box{               .inline-box {! @include inline...
best practices built in/* style.scss */       /* style.css */.box{                  .box {! @include clearfix;     overflo...
best practices built in/* style.scss */           /* style.css */.other-box{                .other-box {! @include pie-cle...
helpers
did you *EVER* expect        Sprites to be fun?@import "compass";           .icon-sprite, .icon-mail-attachment,          ...
@import "compass";$icon-spacing: 100px;$icon-position: 50%;@import "icon/*.png";.attachment{    @include icon-sprite(mail-...
@import "compass";$icon-layout: diagonal;@import "icon/*.png";.attachment{    @include icon-sprite(mail-attachment);}.dele...
.attachment{                       .attachment {  background:                        background: url(data:image/    inline...
li{! padding-left:     image-width(       icon/mail-attachment.png     ) + 10;! background-repeat:no-repeat;}
That’s nice and all butnow I can’t debug myCSS in the Inspector  anymore, right?
FireSass for Firefox    http://dir.kg/firesass
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://...
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 find information and help about, seems to have the most a...
thank you :-)•http://dir.kg/me•http://dir.kg/twitter•http://dir.kg/github•http://dir.kg/slidesWanna play with a the new to...
HTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev tools
Upcoming SlideShare
Loading in …5
×

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

5,054 views

Published on

1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total views
5,054
On SlideShare
0
From Embeds
0
Number of Embeds
132
Actions
Shares
0
Downloads
59
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • new in Sass 3.2 that was released only a few weeks ago\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • HTML5 Dev Conf - Sass, Compass & the new Webdev tools

    1. 1. Dirk Ginader | Yahoo! Inc.Sass, Compass &the new Webdev tools @ginader
    2. 2. “CSS Precompilers areuseless. I don’t need them. I can write CSS myself.” -- me, early 2010
    3. 3. “CSS3 is awesome! Browserscan now do rounded corners and Everything!” -- me, about the same time
    4. 4. “Damn!writing all those Browser prefixes is tedious...” -- me, immediately afterwards
    5. 5. “WOAH! Livereload makes me forget about ⌘R!” -- me, mid 2011
    6. 6. http://livereload.com/
    7. 7. “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
    8. 8. “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
    9. 9. writing 8 lines of CSS to create 1 simple crossbrowser gradient is a PITA... -- everybody, all the time
    10. 10. .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);}
    11. 11. wait a second...
    12. 12. http://incident57.com/codekit/
    13. 13. 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 ;-(
    14. 14. well if it’s *THAT* easy I could as well give it a try, right?me, after having seen this toggle countless times...
    15. 15. http://sass-lang.com/
    16. 16. “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
    17. 17. $ gem install sass
    18. 18. $ sudo gem install sass
    19. 19. alright - let’s see what this can do...
    20. 20. Mixins!
    21. 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. 22. $ sass --watch style.scss:style.cssyou don’t need that thanks to Livereload :-)
    23. 23. $ sass --watch my/sass:my/cssyou don’t need that thanks to Livereload :-)
    24. 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. 25. Mixins can have Params/* style.scss */@mixin linear-gradient($from, $to) { background-image: linear-gradient(top, $from, $to);}
    26. 26. /* 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! );}
    27. 27. /* style.scss */.box_gradient { @include linear-gradient(#444444, #999999);}
    28. 28. /* 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! ! ! );}
    29. 29. /* 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! ! ! );}
    30. 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. 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. 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. 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. 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. 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. 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( HUH?! ! ! ! startColorstr=$from,! ! ! ! endColorstr=$to,GradientType=0! ! ! );}
    37. 37. http://dir.kg/sass.interpolation
    38. 38. /* 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! );}
    39. 39. /* style.scss */.box_gradient { @include linear-gradient(#444444, #999999);}
    40. 40. /* 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! ! ! );}
    41. 41. /* 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! ! ! );}
    42. 42. write once and reuse/* style.scss */.box-with-gradient { @include linear-gradient(#444444, #999999);}.box-with-another-gradient { @include linear-gradient(#000, #fff);}
    43. 43. wait - I never have towrite prefixes again? Ever?
    44. 44. Ok. I’m convinced -what else do we have?
    45. 45. Nesting!
    46. 46. 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; }}
    47. 47. 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; } }}
    48. 48. 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; }
    49. 49. Variables!
    50. 50. 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; }}
    51. 51. built in functions!
    52. 52. 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%); }}
    53. 53. calculate!
    54. 54. Boundary of the content containerheight width margin padding border
    55. 55. the Box Model content area width + left padding + right padding + left border + right border = total box width
    56. 56. 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;}
    57. 57. @import
    58. 58. @import?isn’t that in CSS already? Yes it is - but...
    59. 59. 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; }
    60. 60. http://compass-style.org/
    61. 61. “Compass is an open-source CSS Authoring Framework.” -- the Compass website
    62. 62. “Compass is an excellent set ofready made and well documentedCSS3 mixins, functions and helpers that make SASS more awesome” -- me
    63. 63. $ sudo gem update --system$ sudo gem install compass
    64. 64. $ cd <myproject>$ compass install bare$ compass watch
    65. 65. CSS3 mixins• Appearance • Flexbox• Background Clip • Box Shadow• Background Origin • Box Sizing• Background Size • Columns• Border Radius • Filter
    66. 66. CSS3 mixins• Font Face • CSS Regions• Hyphenation • Text Shadow• Gradients • Transform• Inline Block • Transition• Opacity
    67. 67. http://dir.kg/box.ftw
    68. 68. /* style.scss */.box{ $experimental-support-for-svg: true; @include background-image( !linear-gradient( !! left, !! #2ac363, #cd8c14, #9c4cc2 !) ); width: 80px; height: 80px;}
    69. 69. /* 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;}
    70. 70. http://dir.kg/ultimate
    71. 71. http://csshat.com/
    72. 72. 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; }
    73. 73. best practices built in/* style.scss */ /* style.css */.box{ .box {! @include clearfix; overflow: hidden;} *zoom: 1; }
    74. 74. 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; }
    75. 75. helpers
    76. 76. 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; } ...
    77. 77. @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);}
    78. 78. @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);}
    79. 79. .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; } ...
    80. 80. li{! padding-left: image-width( icon/mail-attachment.png ) + 10;! background-repeat:no-repeat;}
    81. 81. That’s nice and all butnow I can’t debug myCSS in the Inspector anymore, right?
    82. 82. FireSass for Firefox http://dir.kg/firesass
    83. 83. Sass-Sleuth for Webkits http://dir.kg/sass-sleuth
    84. 84. 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;}
    85. 85. please welcome the others:
    86. 86. please welcome the others:• Less: http://lesscss.org• Stylus: http://learnboost.github.com/stylus/
    87. 87. SASS ultimately won out because its the most mature, easiest to find 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/
    88. 88. thank you :-)•http://dir.kg/me•http://dir.kg/twitter•http://dir.kg/github•http://dir.kg/slidesWanna play with a the new toys?I’m looking for a new teammate!•http://dir.kg/job

    ×