at 2011.06.04 UPGRADE JAPAN!!

1. in UPGRADE JAPAN!!
2011.6.4 sat
by @taiju
2011 6 6

2. 2011 6 6

3. Agenda
2011 6 6

4. Agenda
2011 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. Agenda
2011 6 6

9. 2011 6 6

10. 2011 6 6

11. $ sass style.scss:style.css
2011 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.css
2011 6 6

16. 2011 6 6

17. $ sass --watch style.scss:style.css
2011 6 6

18. Agenda
2011 6 6

19. 2011 6 6

20. 2011 6 6

21. 2011 6 6

22. 2011 6 6

23. 2011 6 6

24. Agenda
2011 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/81Z1JA
2011 6 6

28. By Zoeff
http://flic.kr/p/9nd9y6
2011 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. Agenda
2011 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/4BnRVs
2011 6 6

36. By Zoeff
http://flic.kr/p/9nd9y6
2011 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. Agenda
2011 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/6JMMkb
2011 6 6

46. By Zoeff
http://flic.kr/p/9nd9y6
2011 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. Agenda
2011 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/8NydEa
2011 6 6

56. By Zoeff
http://flic.kr/p/9nd9y6
2011 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. Agenda
2011 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