Your SlideShare is downloading. ×
Future of Web Apps: Sass
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Future of Web Apps: Sass

1,232
views

Published on

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

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

Published in: Technology, Business

1 Comment
0 Likes
Statistics
Notes
  • 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

No Downloads
Views
Total Views
1,232
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • Popular\nZen Garden\nSimple design\n
  • \n
  • \n
  • \n
  • Mention Rails.... etc.\nImproving on CSS\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Simple html example\n
  • Styles the h2 and the header\n
  • second h2 problem\n
  • we scope!\nstupid design flaw.\n
  • \n
  • going into functions\n
  • \n
  • 50% lighter?\n
  • \n
  • \n
  • \n
  • Variables\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Amazing!\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 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. Moovweb
    • 3. “The Haml Guy”
    • 4. Sa ss“The Haml Guy”
    • 5. CSS
    • 6. #messages { width: 10px;}
    • 7. CSS2? CSS3?
    • 8. Can’t Get Rid of It
    • 9. About Sass• NOT dynamic• Compiles to CSS!• 5 years old• Not server-side; developer-side• Nathan Weizenbaum & Chris Eppstein
    • 10. 1. WALK2. JOG3. RUN
    • 11. 1. WALK2. JOG3. RUN
    • 12. Using It
    • 13. $hc> sudo gem install sass$hc> sass --watch folder
    • 14. Other Implementations• Ruby - Main Implementation• Python - python-scss or ClassyCSS• .Net - CoffeeAndSass• LESS.app - Has Sass support• PHP - PHamlP• Rails, Django, Everything...
    • 15. Simple Example
    • 16. <div id="header"> <h2>Logo</h2> ...</div>
    • 17. #header { width: 200px;}h2 { font-size: 50px;}
    • 18. <html> <body> <div id="header"> <h2>Logo</h2> ... </div> <h2>Not me!</h2> </body></html>
    • 19. #header { width: 200px;}#header h2 { font-size: 50px;}
    • 20. #header { width: 200px; h2 { font-size: 50px; }}
    • 21. I hate math
    • 22. p { color: #369;}
    • 23. p { color: #369; }a { color: #???; }
    • 24. p { color: #369; }a { color: #d9e6f2; }
    • 25. p { color: #369; }a { color: lighten(#369, 50%); }
    • 26. p { color: #336699; } a { color: #d9e6f2; }p { color: #369; }a { color: lighten(#369, 50%); }
    • 27. DRY
    • 28. $text_color: #369;p { color: $text_color; }a { color: lighten($text_color, 50%); }
    • 29. • lighten()• darken()• saturate()• desaturate()• adjust_hue()• adjust_hue()• adjust_color()• grayscale()
    • 30. Color Mixing! mix($color, $other_color)
    • 31. A Common Example
    • 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. $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. #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. #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. $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. $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. $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. #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. Original Sass .sass vs .scss
    • 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. $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. 1. WALK2. JOG3. RUN
    • 44. Reuse?
    • 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. // _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. Common Mixins
    • 48. @mixin border-radius($radius) { -moz-border-radius: $radius; -webkit-border-radius: $radius; border-radius: $radius; }
    • 49. 1. WALK2. JOG3. RUN
    • 50. Compass Features• Tons of Mixins• Blueprint CSS• Dark “Magic”
    • 51. Spriting
    • 52. 876kb
    • 53. @import "icon/*png";.movie_icon { height: 20px; @include icon-sprite(movie); }
    • 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. 314 + 272 + 290 = 876kb
    • 56. 314 + 272 + 290 = 876kb 357kb!
    • 57. Columns
    • 58. #columns { @include column-count(3); @include column-rule(2px, dashed, #369); width: 300px; }
    • 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. 1. WALK E T S C K RO 2. JOGG K IN C U 3. RUN . F4
    • 61. sassymothereffingtext shadow.com“Sass should not be used for such ill-conceived ends.”
    • 62. • sass-lang.com• compass-style.org• github.com/shawn/shawns-rails3-template
    • 63. Discount code FoWA2011 (25% off!)
    • 64. Thanks!@hcatlin

    ×