Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

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

5.255 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie, Business

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

×