Your SlideShare is downloading. ×
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

Sassられ指南

5,178
views

Published on

at 2011.06.04 UPGRADE JAPAN!!

at 2011.06.04 UPGRADE JAPAN!!

Published in: Technology

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,178
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
17
Comments
0
Likes
5
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

Transcript

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