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.

Sassられ指南

5,625 views

Published on

at 2011.06.04 UPGRADE JAPAN!!

Published in: Technology
  • Be the first to comment

Sassられ指南

  1. 1. in UPGRADE JAPAN!! 2011.6.4 sat by @taiju2011 6 6
  2. 2. 2011 6 6
  3. 3. Agenda2011 6 6
  4. 4. Agenda2011 6 6
  5. 5. 2011 6 6
  6. 6. 2011 6 6
  7. 7. $main-color: #ce4dd6; $style: solid; #navbar { border-bottom: { color: $main-color; style: $style; } } a { color: $main-color; &:hover { border-bottom: $style 1px; } }2011 6 6
  8. 8. Agenda2011 6 6
  9. 9. 2011 6 6
  10. 10. 2011 6 6
  11. 11. $ sass style.scss:style.css2011 6 6
  12. 12. $main-color: #ce4dd6; $style: solid; #navbar { border-bottom: { color: $main-color; style: $style; } } a { color: $main-color; &:hover { border-bottom: $style 1px; } }2011 6 6
  13. 13. #navbar { border-bottom-color: #ce4dd6; border-bottom-style: solid; } a { color: #ce4dd6; } a:hover { border-bottom: solid 1px; }2011 6 6
  14. 14. 2011 6 6
  15. 15. $ sass -t compact style.scss:style.css $ sass -t compressed style.scss:style.css $ sass -t expanded style.scss:style.css2011 6 6
  16. 16. 2011 6 6
  17. 17. $ sass --watch style.scss:style.css2011 6 6
  18. 18. Agenda2011 6 6
  19. 19. 2011 6 6
  20. 20. 2011 6 6
  21. 21. 2011 6 6
  22. 22. 2011 6 6
  23. 23. 2011 6 6
  24. 24. Agenda2011 6 6
  25. 25. #contents { ... } #contents .news { ... } #contents .news .twitter { ... } #contents .news .blog { ... } #contents .news .twitter ul { ... } ...2011 6 6
  26. 26. 2011 6 6
  27. 27. By stevendepolo http://flic.kr/p/81Z1JA2011 6 6
  28. 28. By Zoeff http://flic.kr/p/9nd9y62011 6 6
  29. 29. #contents { ... .news { ... .twitter { ... ul { ... } } .blog { ... } } }2011 6 6
  30. 30. 2011 6 6
  31. 31. /* */ /* */ a { h1 { &:link { ... } font: { &:visited { ... } family: Verdana; &:hover { ... } size: 130%; &:active { ... } weight: bold; } } } /* class */ #nav ul li { &.selected { ... } }2011 6 6
  32. 32. Agenda2011 6 6
  33. 33. #header { background-color: #349ac1; } #footer { background-color: #349ac1; }2011 6 6
  34. 34. 2011 6 6
  35. 35. By Lara604 http://flic.kr/p/4BnRVs2011 6 6
  36. 36. By Zoeff http://flic.kr/p/9nd9y62011 6 6
  37. 37. $base-color: #349ac1; #header { background-color: $base-color; } #footer { background-color: $base-color; }2011 6 6
  38. 38. 2011 6 6
  39. 39. 2011 6 6
  40. 40. $body_width: 1100px; $sidenav_width: 200px; #contents { width: $body_width - $sidenav_width; } $base-color: #666; #header { background-color: $base-color; .navigation { background-color: darken($base-color, 40%); } }2011 6 6
  41. 41. 2011 6 6
  42. 42. Agenda2011 6 6
  43. 43. #header { #contents { zoom: 1; zoom: 1; } } #header:after { #contents:after { content: ‘’; content: ‘’; display: block; display: block; clear: both; clear: both; height: 0; height: 0; } }2011 6 6
  44. 44. 2011 6 6
  45. 45. By mdanys http://flic.kr/p/6JMMkb2011 6 6
  46. 46. By Zoeff http://flic.kr/p/9nd9y62011 6 6
  47. 47. @mixin clearfix { #header { zoom: 1; @include clearfix; &:after { ... content: ‘’; } display: block; #contents { clear: both; @include clearfix; height: 0; ... } } }2011 6 6
  48. 48. 2011 6 6
  49. 49. 2011 6 6
  50. 50. 2011 6 6
  51. 51. 2011 6 6
  52. 52. Agenda2011 6 6
  53. 53. @import “common.css”; @import “home.css”; @import “about.css”; @import “contact.css”; @import “news.css”;2011 6 6
  54. 54. 2011 6 6
  55. 55. By sahlgoode http://flic.kr/p/8NydEa2011 6 6
  56. 56. By Zoeff http://flic.kr/p/9nd9y62011 6 6
  57. 57. @import “common.scss”; @import “home.scss”; @import “about.scss”; @import “contact.scss”; @import “news.scss”;2011 6 6
  58. 58. 2011 6 6
  59. 59. /* HTTP */ @import “common.css”; @import “home.css”; @import “about.css”; @import “contact.css”; @import “news.css”; /* @import scss */ @import “common.scss”; @import “home.scss”; @import “about.scss”; @import “contact.scss”; @import “news.scss”;2011 6 6
  60. 60. 2011 6 6
  61. 61. 2011 6 6
  62. 62. Agenda2011 6 6
  63. 63. 2011 6 6
  64. 64. 2011 6 6
  65. 65. 2011 6 6
  66. 66. 2011 6 6
  67. 67. 2011 6 6
  68. 68. 2011 6 6

×