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 ima...
“What does LiveReload do?LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as n...
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,      col...
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, ...
$ 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.css
$ sass --watch my/sass:my/css
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) {  background-color: $to;  background-image:    -webkit-gradient(linear...
/* style.scss */.box_gradient {  @include linear-gradient(#444444, #999999);}
/* style.css */.box_gradient {  background-color: #999999;  background-image:    -webkit-gradient(linear, left top, left b...
/* style.css */.box_gradient {  background-color: #999999;  background-image:    -webkit-gradient(linear, left top, left b...
/* style.css */.box_gradient {  background-color: #999999;  background-image:    -webkit-gradient(linear, left top, left b...
/* style.css */.box_gradient {  background-color: #999999;  background-image:    -webkit-gradient(linear, left top, left b...
/* style.css */.box_gradient {  background-color: #999999;  background-image:    -webkit-gradient(linear, left top, left b...
/* style.css */.box_gradient {  background-color: #999999;  background-image:    -webkit-gradient(linear, left top, left b...
/* style.css */.box_gradient {  background-color: #999999;  background-image:    -webkit-gradient(linear, left top, left b...
/* style.css */.box_gradient {  background-color: #999999;  background-image:    -webkit-gradient(linear, left top, left b...
/* style.css */.box_gradient {  background-color: #999999;  background-image:    -webkit-gradient(linear, left top, left b...
/* style.css */.box_gradient {  background-color: #999999;  background-image:    -webkit-gradient(linear, left top, left b...
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#interpolation_
/* style.scss */@mixin linear-gradient($from, $to) {  background-color: $to;  background-image:    -webkit-gradient(linear...
/* style.scss */.box_gradient {  @include linear-gradient(#444444, #999999);}
/* style.css */.box_gradient {  background-color: #999999;  background-image:    -webkit-gradient(linear, left top, left b...
/* style.css */.box_gradient {  background-color: #999999;  background-image:    -webkit-gradient(linear, left top, left b...
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://paulirish.com/2012/box-sizing-border-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://www.colorzilla.com/gradient-editor/
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;}
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://ginader.com•http://twitter.com/ginader•http://github.com/ginader•http://www.slideshare.net/ginader•ht...
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Upcoming SlideShare
Loading in …5
×

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

5,135 views

Published on

Published in: Technology, Business
6 Comments
9 Likes
Statistics
Notes
No Downloads
Views
Total views
5,135
On SlideShare
0
From Embeds
0
Number of Embeds
929
Actions
Shares
0
Downloads
47
Comments
6
Likes
9
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
  • \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
  • Sass, Compass and the new tools - Open Web Camp IV

    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 9 lines of CSS to create 1 simple crossbrowser gradient is a PITA... -- everybody, all the time
    10. 10. .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)";}
    11. 11. wait a second...
    12. 12. well if it’s *THAT* easy I could as well give it a try, right?me, after having seen this toggle countless times...
    13. 13. http://sass-lang.com/
    14. 14. “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
    15. 15. $ gem install sass
    16. 16. $ sudo gem install sass
    17. 17. alright - let’s see what this can do...
    18. 18. Mixins!
    19. 19. 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;}
    20. 20. $ sass --watch style.scss:style.css
    21. 21. $ sass --watch my/sass:my/css
    22. 22. 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);}
    23. 23. Mixins can have Params/* style.scss */@mixin linear-gradient($from, $to) { background-image: linear-gradient(top, $from, $to);}
    24. 24. /* 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));}
    25. 25. /* style.scss */.box_gradient { @include linear-gradient(#444444, #999999);}
    26. 26. /* 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)";}
    27. 27. /* 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)";}
    28. 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. 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. 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. 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. 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. 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. 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); HUH? -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr=$from, endColorstr=$to)";}
    35. 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); HUH? -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr=$from, endColorstr=$to)";HUH?}
    36. 36. http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#interpolation_
    37. 37. /* 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}));}
    38. 38. /* style.scss */.box_gradient { @include linear-gradient(#444444, #999999);}
    39. 39. /* 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)";}
    40. 40. /* 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)";}
    41. 41. write once and reuse/* style.scss */.box-with-gradient { @include linear-gradient(#444444, #999999);}.box-with-another-gradient { @include linear-gradient(#000, #fff);}
    42. 42. wait - I never have towrite prefixes again? Ever?
    43. 43. Ok. I’m convinced -what else do we have?
    44. 44. Nesting!
    45. 45. 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; }}
    46. 46. 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; } }}
    47. 47. 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; }
    48. 48. Variables!
    49. 49. 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; }}
    50. 50. built in functions!
    51. 51. 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%); }}
    52. 52. calculate!
    53. 53. Boundary of the content containerheight width margin padding border
    54. 54. the Box Model content area width + left padding + right padding + left border + right border = total box width
    55. 55. 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;}
    56. 56. @import
    57. 57. @import?isn’t that in CSS already? Yes it is - but...
    58. 58. 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; }
    59. 59. http://compass-style.org/
    60. 60. “Compass is an open-source CSS Authoring Framework.” -- the Compass website
    61. 61. “Compass is an excellent set ofready made and well documentedCSS3 mixins, functions and helpers that make SASS more awesome” -- me
    62. 62. $ sudo gem update --system$ sudo gem install compass
    63. 63. $ cd <myproject>$ compass install bare$ compass watch
    64. 64. CSS3 mixins• Appearance • Flexbox• Background Clip • Box Shadow• Background Origin • Box Sizing• Background Size • Columns• Border Radius • Filter
    65. 65. CSS3 mixins• Font Face • CSS Regions• Hyphenation • Text Shadow• Gradients • Transform• Inline Block • Transition• Opacity
    66. 66. http://paulirish.com/2012/box-sizing-border-box-ftw/
    67. 67. /* style.scss */.box{ $experimental-support-for-svg: true; @include background-image( !linear-gradient( !! left, !! #2ac363, #cd8c14, #9c4cc2 !) ); width: 80px; height: 80px;}
    68. 68. /* 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;}
    69. 69. http://www.colorzilla.com/gradient-editor/
    70. 70. 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; }
    71. 71. best practices built in/* style.scss */ /* style.css */.box{ .box {! @include clearfix; overflow: hidden;} *zoom: 1; }
    72. 72. 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; }
    73. 73. helpers
    74. 74. 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; } ...
    75. 75. @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);}
    76. 76. @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);}
    77. 77. .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; } ...
    78. 78. li{! padding-left: image-width( icon/mail-attachment.png ) + 10;! background-repeat:no-repeat;}
    79. 79. please welcome the others:
    80. 80. please welcome the others:• Less: http://lesscss.org• Stylus: http://learnboost.github.com/stylus/
    81. 81. 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/
    82. 82. thank you ;-)•http://ginader.com•http://twitter.com/ginader•http://github.com/ginader•http://www.slideshare.net/ginader•http://speakerrate.com/speakers/ 225-ginader

    ×