SlideShare une entreprise Scribd logo

Future of Web Apps: Sass

•Télécharger en tant que KEY, PDF•
•
Hampton Catlin
Hampton Catlin

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

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

Recommandé

Folla de Estilos / Hoja de Estilos de kesar.org
Folla de Estilos / Hoja de Estilos de kesar.orgFolla de Estilos / Hoja de Estilos de kesar.org
Folla de Estilos / Hoja de Estilos de kesar.orglove4
 
Documento
DocumentoDocumento
DocumentoVersaodownloads
 
Sass einfuehrung-t3camphh
Sass einfuehrung-t3camphhSass einfuehrung-t3camphh
Sass einfuehrung-t3camphhBerit Hlubek
 
Fondo(beky_5)
Fondo(beky_5)Fondo(beky_5)
Fondo(beky_5)love4
 
Drop down horizontal menu
Drop down horizontal menuDrop down horizontal menu
Drop down horizontal menuOelva
 
Data Visualization Project Code
Data Visualization Project CodeData Visualization Project Code
Data Visualization Project CodeLacey Harris-Coble
 
Css
CssCss
CssStobard
 
Proga 0511
Proga 0511Proga 0511
Proga 0511Atsushi Tadokoro
 

Recommandé

Folla de Estilos / Hoja de Estilos de kesar.org
Folla de Estilos / Hoja de Estilos de kesar.orgFolla de Estilos / Hoja de Estilos de kesar.org
Folla de Estilos / Hoja de Estilos de kesar.orglove4
 
Documento
DocumentoDocumento
DocumentoVersaodownloads
 
Sass einfuehrung-t3camphh
Sass einfuehrung-t3camphhSass einfuehrung-t3camphh
Sass einfuehrung-t3camphhBerit Hlubek
 
Fondo(beky_5)
Fondo(beky_5)Fondo(beky_5)
Fondo(beky_5)love4
 
Drop down horizontal menu
Drop down horizontal menuDrop down horizontal menu
Drop down horizontal menuOelva
 
Data Visualization Project Code
Data Visualization Project CodeData Visualization Project Code
Data Visualization Project CodeLacey Harris-Coble
 
Css
CssCss
CssStobard
 
Proga 0511
Proga 0511Proga 0511
Proga 0511Atsushi Tadokoro
 
Kwp2 091119
Kwp2 091119Kwp2 091119
Kwp2 091119Atsushi Tadokoro
 
Web Presen1 0611
Web Presen1 0611Web Presen1 0611
Web Presen1 0611Atsushi Tadokoro
 
Exemplositecss
ExemplositecssExemplositecss
Exemplositecssaugustodebian
 
Tau Web0526
Tau Web0526Tau Web0526
Tau Web0526Atsushi Tadokoro
 
Lemonade
LemonadeLemonade
LemonadeDuke Khaos
 
Sass & compass
Sass & compassSass & compass
Sass & compassJavier Arques Hernández
 
Form refactoring
Form refactoringForm refactoring
Form refactoringManuel Baldassarri
 

Contenu connexe

Tendances

Tendances (7)

Kwp2 091119
Kwp2 091119Kwp2 091119
Kwp2 091119
 
Web Presen1 0611
Web Presen1 0611Web Presen1 0611
Web Presen1 0611
 
Exemplositecss
ExemplositecssExemplositecss
Exemplositecss
 
Tau Web0526
Tau Web0526Tau Web0526
Tau Web0526
 
Lemonade
LemonadeLemonade
Lemonade
 
Sass & compass
Sass & compassSass & compass
Sass & compass
 
Form refactoring
Form refactoringForm refactoring
Form refactoring
 

Future of Web Apps: Sass

  • 1.
  • 2. 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.
  • 6. CSS
  • 7. #messages { width: 10px; }
  • 10.
  • 11. About Sass • NOT dynamic • Compiles to CSS! • 5 years old • Not server-side; developer-side • Nathan Weizenbaum & Chris Eppstein
  • 15. $hc> sudo gem install sass $hc> sass --watch folder
  • 16.
  • 17.
  • 18.
  • 19. Other Implementations • Ruby - Main Implementation • Python - python-scss or ClassyCSS • .Net - CoffeeAndSass • LESS.app - Has Sass support • PHP - PHamlP • Rails, Django, Everything...
  • 21. <div id="header"> <h2>Logo</h2> ... </div>
  • 22. #header { width: 200px; } h2 { font-size: 50px; }
  • 23. <html> <body> <div id="header"> <h2>Logo</h2> ... </div> <h2>Not me!</h2> </body> </html>
  • 24. #header { width: 200px; } #header h2 { font-size: 50px; }
  • 25. #header { width: 200px; h2 { font-size: 50px; } }
  • 27. p { color: #369; }
  • 28. p { color: #369; } a { color: #???; }
  • 29. p { color: #369; } a { color: #d9e6f2; }
  • 30. p { color: #369; } a { color: lighten(#369, 50%); }
  • 31. p { color: #336699; } a { color: #d9e6f2; } p { color: #369; } a { color: lighten(#369, 50%); }
  • 32. DRY
  • 33. $text_color: #369; p { color: $text_color; } a { color: lighten($text_color, 50%); }
  • 34. • lighten() • darken() • saturate() • desaturate() • adjust_hue() • adjust_hue() • adjust_color() • grayscale()
  • 35. Color Mixing! mix($color, $other_color)
  • 37. <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>
  • 38. $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; } }
  • 39. #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; } }
  • 40. #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; } }
  • 41. $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; } }
  • 42. $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; } }
  • 43. $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; } }}
  • 44. #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; } }}
  • 45. Original Sass .sass vs .scss
  • 46. $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; } }}
  • 47. $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
  • 50. @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); } }
  • 51. // _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); } }
  • 53. @mixin border-radius($radius) { -moz-border-radius: $radius; -webkit-border-radius: $radius; border-radius: $radius; }
  • 55.
  • 56. Compass Features • Tons of Mixins • Blueprint CSS • Dark “Magic”
  • 58.
  • 59. 876kb
  • 60. @import "icon/*png"; .movie_icon { height: 20px; @include icon-sprite(movie); }
  • 61. .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); }
  • 62. 314 + 272 + 290 = 876kb
  • 63. 314 + 272 + 290 = 876kb 357kb!
  • 65. #columns { @include column-count(3); @include column-rule(2px, dashed, #369); width: 300px; }
  • 66. #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; }
  • 67. 1. WALK E T S C K RO 2. JOGG K IN C U 3. RUN . F 4
  • 68. sassymothereffingtext shadow.com “Sass should not be used for such ill-conceived ends.”
  • 69. • sass-lang.com • compass-style.org • github.com/shawn/shawns-rails3-template

Notes de l'éditeur

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. Popular\nZen Garden\nSimple design\n
  7. \n
  8. \n
  9. \n
  10. Mention Rails.... etc.\nImproving on CSS\n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. Simple html example\n
  22. Styles the h2 and the header\n
  23. second h2 problem\n
  24. we scope!\nstupid design flaw.\n
  25. \n
  26. going into functions\n
  27. \n
  28. 50% lighter?\n
  29. \n
  30. \n
  31. \n
  32. Variables\n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. Amazing!\n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n