Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Future of Web Apps: Sass

1,627 views

Published on

Hampton Catlin's presentation on Sass for the Future of Web Apps (FoWA) 2011 conference in London.

Published in: Technology, Business
  • If anyone is interested in only the Sass from my shawns-rails3-template, you can find it at this repo: github.com/shawn/shawns-sass (shawns-rails3-template is currently importing this repo as a sub module, anyhow.)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Future of Web Apps: Sass

  1. 1. Hampton Catlin• (Ex) Product Lead for Wikipedia Mobile (en.m.wikipedia.org)• Dictionary! for iPhone, WebOS. 20 million users.• Maintainer of mini_magick• Misc Rails API features.
  2. 2. Moovweb
  3. 3. “The Haml Guy”
  4. 4. Sa ss“The Haml Guy”
  5. 5. CSS
  6. 6. #messages { width: 10px;}
  7. 7. CSS2? CSS3?
  8. 8. Can’t Get Rid of It
  9. 9. About Sass• NOT dynamic• Compiles to CSS!• 5 years old• Not server-side; developer-side• Nathan Weizenbaum & Chris Eppstein
  10. 10. 1. WALK2. JOG3. RUN
  11. 11. 1. WALK2. JOG3. RUN
  12. 12. Using It
  13. 13. $hc> sudo gem install sass$hc> sass --watch folder
  14. 14. Other Implementations• Ruby - Main Implementation• Python - python-scss or ClassyCSS• .Net - CoffeeAndSass• LESS.app - Has Sass support• PHP - PHamlP• Rails, Django, Everything...
  15. 15. Simple Example
  16. 16. <div id="header"> <h2>Logo</h2> ...</div>
  17. 17. #header { width: 200px;}h2 { font-size: 50px;}
  18. 18. <html> <body> <div id="header"> <h2>Logo</h2> ... </div> <h2>Not me!</h2> </body></html>
  19. 19. #header { width: 200px;}#header h2 { font-size: 50px;}
  20. 20. #header { width: 200px; h2 { font-size: 50px; }}
  21. 21. I hate math
  22. 22. p { color: #369;}
  23. 23. p { color: #369; }a { color: #???; }
  24. 24. p { color: #369; }a { color: #d9e6f2; }
  25. 25. p { color: #369; }a { color: lighten(#369, 50%); }
  26. 26. p { color: #336699; } a { color: #d9e6f2; }p { color: #369; }a { color: lighten(#369, 50%); }
  27. 27. DRY
  28. 28. $text_color: #369;p { color: $text_color; }a { color: lighten($text_color, 50%); }
  29. 29. • lighten()• darken()• saturate()• desaturate()• adjust_hue()• adjust_hue()• adjust_color()• grayscale()
  30. 30. Color Mixing! mix($color, $other_color)
  31. 31. A Common Example
  32. 32. <div id="columns"> <div class="column" id="left_column"> 1</div> <div class="column" id="middle_column">2</div> <div class="column" id="right_column"> 3</div></div>
  33. 33. $column_width: 300px;$right_column: 20px;$left_column: 30px;#columns { .column { border: 1px solid black; } #right_column { width: $right_column; } #left_column { width: $left_column; } #middle_column { width: $column_width - $left_column - $right_column; } }
  34. 34. #columns .column { border: 1px solid black; } #columns #right_column { width: 20px; }$column_width: 300px; #columns #left_column {$right_column: 20px; width: 30px; }$left_column: 30px; #columns #middle_column { width: 250px; }#columns { .column { border: 1px solid black; } #right_column { width: $right_column; } #left_column { width: $left_column; } #middle_column { width: $column_width - $left_column - $right_column; } }
  35. 35. #columns .column, #sidebar .column { border: 1px solid black; } #columns #right_column, #sidebar #right width: 20px; } #columns #left_column, #sidebar #left_c$column_width: 300px; width: 30px; }$right_column: 20px; #columns #middle_column, #sidebar #midd$left_column: 30px; width: 250px; }#columns, #sidebar { .column { border: 1px solid black; } #right_column { width: $right_column; } #left_column { width: $left_column; } #middle_column { width: $column_width - $left_column - $right_column; } }
  36. 36. $column_width: 300px;$right_column: 20px;$left_column: 30px;#columns { .column { border: 1px solid black; } .right // Is this the right right? { width: $right_column; } .left { width: $left_column; } .middle { width: $column_width - $left_column - $right_column; } }
  37. 37. $column_width: 300px;$right_column: 20px;$left_column: 30px;#columns { .column { border: 1px solid black; } .column.right { width: $right_column; } .column.left { width: $left_column; } .column.middle { width: $column_width - $left_column - $right_column; } }
  38. 38. $column_width: 300px;$right_column: 20px;$left_column: 30px;#columns { .column { border: 1px solid black; &.right { width: $right_column; } &.left { width: $left_column; } &.middle { width: $column_width - $left_column - $right_column; } }}
  39. 39. #columns .column { border: 1px solid black; } #columns .column.right { width: 20px; }$column_width: 300px; #columns .column.left {$right_column: 20px; width: 30px; }$left_column: 30px; #columns .column.middle { width: 250px; }#columns { .column { border: 1px solid black; &.right { width: $right_column; } &.left { width: $left_column; } &.middle { width: $column_width - $left_column - $right_column; } }}
  40. 40. Original Sass .sass vs .scss
  41. 41. $column_width: 300px;$right_column: 20px;$left_column: 30px;#columns { .column { border: 1px solid black; &.right { width: $right_column; } &.left { width: $left_column; } &.middle { width: $column_width - $left_column - $right_column; } }}
  42. 42. $column_width: 300px$right_column: 20px$left_column: 30px#columns .column border: 1px solid black &.right width: $right_column &.left width: $left_column &.middle width: $column_width - $left_column - $right_column
  43. 43. 1. WALK2. JOG3. RUN
  44. 44. Reuse?
  45. 45. @mixin three_columns($width, $left_column, $right_column) { &.right { width: $right_column; } &.left { width: $left_column; } &.middle { width: $width - $left_column - $right_column; } }#columns { .column { border: 1px solid black; @include three_columns(300px, 20px, 30px); } }
  46. 46. // _mixins.sass@mixin three_columns($width, $left_column, $right_column) { &.right { width: $right_column; } &.left { width: $left_column; } &.middle { width: $width - $left_column - $right_column; } }// stylesheet.sass@import _mixins.sass#columns { .column { border: 1px solid black; @include three_columns(300px, 20px, 30px); } }
  47. 47. Common Mixins
  48. 48. @mixin border-radius($radius) { -moz-border-radius: $radius; -webkit-border-radius: $radius; border-radius: $radius; }
  49. 49. 1. WALK2. JOG3. RUN
  50. 50. Compass Features• Tons of Mixins• Blueprint CSS• Dark “Magic”
  51. 51. Spriting
  52. 52. 876kb
  53. 53. @import "icon/*png";.movie_icon { height: 20px; @include icon-sprite(movie); }
  54. 54. .icon-sprite, .movie_icon { background: url(../../../../images/compass/icon-s2c4 } /* line 8, ../sass/screen.scss */ .movie_icon { height: 20px; background-position: 0 -22px; }@import "icon/*png";.movie_icon { height: 20px; @include icon-sprite(movie); }
  55. 55. 314 + 272 + 290 = 876kb
  56. 56. 314 + 272 + 290 = 876kb 357kb!
  57. 57. Columns
  58. 58. #columns { @include column-count(3); @include column-rule(2px, dashed, #369); width: 300px; }
  59. 59. #columns { @include column-count(3); @include column-rule(2px, dashed, #369); width: 300px; }#columns_borders { -moz-column-count: 3; -webkit-column-count: 3; -o-column-count: 3; column-count: 3; -moz-column-rule: 2px dashed #336699; -webkit-column-rule: 2px dashed #336699; -o-column-rule: 2px dashed #336699; column-rule: 2px dashed #336699; width: 300px; }
  60. 60. 1. WALK E T S C K RO 2. JOGG K IN C U 3. RUN . F4
  61. 61. sassymothereffingtext shadow.com“Sass should not be used for such ill-conceived ends.”
  62. 62. • sass-lang.com• compass-style.org• github.com/shawn/shawns-rails3-template
  63. 63. Discount code FoWA2011 (25% off!)
  64. 64. Thanks!@hcatlin

×