Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Developing and maintaining CSS projects can become a tedious task full of repetition. Especially taking care of all the vendor prefixes necessary to make your shiny gradients, drop shadows and rounded corners work in all the many Browsers out there seems so hard that many developers simply give up and go all -webkit-.
As it turns out there's absolutely no reason for that. CSS preprocessors like SASS with Compass take the pain out of CSS development and bring the fun back in! Additionally tools like Livereload or CodeKit speed up development even further!
I can happily say that my web development work-flow has never been more fun than in the last year. Let me show you why :-)

Ac20c97a1a7c321444013be47f1fcee6?s=128

Dirk Ginader

July 14, 2012
Tweet

Transcript

  1. Dirk Ginader | Yahoo! Inc. SASS, Compass & the new

    Webdev tools @ginader
  2. “CSS Precompilers are useless. I don’t need them. I can

    write CSS myself.” -- me, early 2010
  3. “CSS3 is awesome! Browsers can now do rounded corners and

    Everything!” -- me, about the same time
  4. “Damn! writing all those Browser prefixes is tedious...” -- me,

    immediately afterwards
  5. “WOAH! Livereload makes me forget about ⌘R!” -- me, mid

    2011
  6. None
  7. http://livereload.com/

  8. “The Web Developer Wonderland (a happy land where browsers don't

    need a Refresh button) CSS edits and image changes apply live. CoffeeScript, SASS, LESS and others just work.” -- the Livereload website
  9. “What does LiveReload do? LiveReload monitors changes in the file

    system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.” -- the Livereload website
  10. writing 9 lines of CSS to create 1 simple cross

    browser gradient is a PITA... -- everybody, all the time
  11. .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')"; }
  12. wait a second...

  13. well if it’s *THAT* easy I could as well give

    it a try, right? me, after having seen this toggle countless times...
  14. http://sass-lang.com/

  15. “Sass makes CSS fun again. Sass is an extension of

    CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.” -- the Sass Website
  16. $ gem install sass

  17. None
  18. $ sudo gem install sass

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

  20. Mixins!

  21. /* 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; } reusable chunks of code
  22. $ sass --watch style.scss:style.css

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

  24. /* style.css */ .box-with-gradient { background-image: linear-gradient(top, #444, #999); }

    .another-box-with-same-gradient { background-image: linear-gradient(top, #444, #999); } becomes
  25. /* style.scss */ @mixin linear-gradient($from, $to) { background-image: linear-gradient(top, $from,

    $to); } Mixins can have Params
  26. /* 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')); }
  27. /* style.scss */ .box_gradient { @include linear-gradient(#444444, #999999); }

  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')"; } HUH? HUH?
  29. None
  30. http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#interpolation_

  31. /* 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}')); }
  32. /* style.scss */ .box_gradient { @include linear-gradient(#444444, #999999); }

  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='#444444', endColorstr='#999999'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#999999')"; }
  34. /* style.scss */ .box-with-gradient { @include linear-gradient(#444444, #999999); } .box-with-another-gradient

    { @include linear-gradient(#000, #fff); } write once and reuse
  35. wait - I never have to write prefixes again? Ever?

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

  38. Nesting!

  39. /* style.css */ #navbar { width: 80%; height: 23px; }

    #navbar ul { list-style-type: none; } #navbar li { float: left; } #navbar li a { font-weight: bold; } /* style.scss */ #navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; a { font-weight: bold; } } } no more repetitive selector writing!
  40. even properties are nestable! /* style.scss */ .fakeshadow { border:

    { style: solid; left: { width: 4px; color: #888; } right: { width: 2px; color: #ccc; } } } /* style.css */ .fakeshadow { border-style: solid; border-left-width: 4px; border-left-color: #888; border-right-width: 2px; border-right-color: #ccc; }
  41. None
  42. use the & (parent reference) i.e. for pseudoclasses /* style.scss

    */ a { color: #ce4dd6; &:hover { color: #ffb3ff; } &:visited { color: #c458cb; } .module &{ ! color: red; } } /* style.css */ a { color: #ce4dd6; } a:hover { color: #ffb3ff; } a:visited { color: #c458cb; } .module a { color: red; }
  43. Variables!

  44. define standard settings and reuse across your project /* style.scss

    */ $main-color: #ce4dd6; $style: solid; #navbar { border-bottom: { color: $main-color; style: $style; } } a { color: $main-color; &:hover { border-bottom: $style 1px; } } /* style.css */ #navbar { border-bottom-color: #ce4dd6; border-bottom-style: solid; } a { color: #ce4dd6; } a:hover { border-bottom: solid 1px; }
  45. built in functions!

  46. modify and transform /* style.scss */ $linkcolor: #ce4dd6; a {

    color: $linkcolor; &:hover { color: lighten($linkcolor, 30%); } &:active { color: darken($linkcolor, 30%); } } /* style.css */ a { color: #ce4dd6; } a:hover { color: #f0c9f3; } a:active { color: #6b1a70; }
  47. calculate!

  48. width Boundary of the content container border margin padding height

  49. None
  50. content area width + left padding + right padding +

    left border + right border = total box width the Box Model
  51. calculate the s**t out of the Box Model! /* style.scss

    */ $box-width : 100px; $box-border : 3px; $box-padding : 10px; $box-margin : 10px; .box{ ! margin : $box-margin; ! padding : $box-padding; ! border: $box-border solid black; ! width : $box-width ! ! ! - $box-border * 2 ! ! ! - $box-padding * 2; } /* style.css */ .box { margin: 10px; padding: 10px; border: 3px solid black; width: 74px; }
  52. @import

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

    but...
  54. None
  55. combine them instead of loading one after the other! /*

    style.scss */ @import 'box-model'; @import 'calculate'; @import 'function'; /* style.css */ .box { width: 74px; margin: 10px; } #navbar { width: 800px; } #navbar li { float: left; width: 150px; } a { color: #ce4dd6; } a:hover { color: #f0c9f3; } a:active { color: #6b1a70; }
  56. None
  57. http://compass-style.org/

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

    Compass website
  59. “Compass is an excellent set of ready made and well

    documented CSS3 mixins, functions and helpers that make SASS more awesome” -- me
  60. $ sudo gem update --system $ sudo gem install compass

  61. None
  62. $ cd <myproject> $ compass install bare $ compass watch

  63. None
  64. None
  65. CSS3 mixins • Appearance • Background Clip • Background Origin

    • Background Size • Border Radius • Flexbox • Box Shadow • Box Sizing • Columns • Filter
  66. CSS3 mixins • Font Face • Hyphenation • Gradients •

    Inline Block • Opacity • CSS Regions • Text Shadow • Transform • Transition
  67. http://paulirish.com/2012/box-sizing-border-box-ftw/

  68. /* style.scss */ .box{ $experimental-support-for-svg: true; @include background-image( !linear-gradient( !!

    left, !! #2ac363, #cd8c14, #9c4cc2 !) ); width: 80px; height: 80px; }
  69. /* style.css */ .box { background-image: url('data:image/svg +xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2 ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM +PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblV

    zZSIgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI +PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhYzM2MyIvPjxzdG9wIG9mZnNldD0 iNTAlIiBzdG9wLWNvbG9yPSIjY2Q4YzE0Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWN vbG9yPSIjOWM0Y2MyIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM +PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJ sKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color- stop(0%, #2ac363), color-stop(50%, #cd8c14), color-stop(100%, #9c4cc2)); background-image: -webkit-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2); background-image: -moz-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2); background-image: -o-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2); background-image: -ms-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2); background-image: linear-gradient(left, #2ac363, #cd8c14, #9c4cc2); width: 80px; height: 80px; }
  70. http://www.colorzilla.com/gradient-editor/

  71. /* style.scss */ .inline-box{ ! @include inline-block; } /* style.css

    */ .inline-box { 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
  72. /* style.scss */ .box{ ! @include clearfix; } /* style.css

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

    pie-clearfix; } /* style.css */ .other-box { *zoom: 1; } .other-box:after { content: ""; display: table; clear: both; }
  74. helpers

  75. did you *EVER* expect Sprites to be fun? @import "compass";

    @import "icon/*.png"; @include all-icon-sprites; .icon-sprite, .icon-mail-attachment, .icon-mail-delete, .icon-mail-reply { background: url('../images/icon-s10b2c68b42.png') no-repeat; } .icon-mail-attachment { background-position: -26px -2771px; } .icon-mail-delete { background-position: -27px -2658px; } ...
  76. None
  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. @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. None
  80. .attachment{ background: inline-image( 'icon/mail-attachment.png' ) no-repeat; } .attachment { background:

    url('data:image/ png;base64,iVBORw0KGgoAAAANSUh EUgAAAA0AAAAOBAMAAAAGUYvhAAAAA 3NCSVQICAjb4U/gAAAAHlBMVEX/// 8AAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAACGjDitAAAACnRSTlMAESIzRF Vmd4iZu4Nz1gAAAAlwSFlzAAALEgAA CxIB0t1+/ AAAABR0RVh0Q3JlYXRpb24gVGltZQA 0LzQvMTI1uCR/ AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZS BGaXJld29ya3MgQ1M0BrLToAAAAFNJ REFUCJljYAACjWkCIIqpRSwBzDVgLg BxGwTEA0Bc9sAyMLdMPAHMTSxjhHKb GBg4DAvLOBQYGNQZ1EFcBg2gEJDLwG HAAuIyMJangg1nYARTACNTDXDO7nbI AAAAAElFTkSuQmCC') no-repeat; } ...
  81. li{ ! padding-left: image-width( 'icon/mail-attachment.png' ) + 10; ! background-repeat:no-repeat;

    }
  82. None
  83. please welcome the others:

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

  85. SASS ultimately won out because it's the most mature, easiest

    to find information and help about, seems to have the most active and robust development, and has the least bugs. http://css-tricks.com/musings-on-preprocessing/ -- Chris Coyier, just recently
  86. None
  87. thank you ;-) •http://ginader.com •http://twitter.com/ginader •http://github.com/ginader •http://www.slideshare.net/ginader •http://speakerrate.com/speakers/ 225-ginader