Sass
- 5. .button {...} .button .last {...} .button .last span {...} .button .txt {...} .button .txt .tag {...} .button .txt p {...} .button a {...} .button a:after {...} 13年12月6日金曜日
- 6. .button {...} .button .last {...} .button .last span {...} .button .txt {...} .button .txt .tag {...} .button .txt p {...} .button a {...} .button a:after {...} 13年12月6日金曜日
- 8. .button { font-size: 13px; } ... .footer .sub a { font-size: 13px; } ... .button_active .txt p { font-size: 13px; } 13年12月6日金曜日
- 9. .button { font-size: 13px; } ... .footer .sub a { font-size: 13px; } ... .button_active .txt p { font-size: 13px; } 13年12月6日金曜日
- 11. .button { font-size: 13px; height: 33px; text-align: center; z-index: 2; border: 1px solid #000; } 13年12月6日金曜日
- 12. .button { font-size: 13px; height: 33px; text-align: center; z-index: 2; border: 1px solid #000; } <div class=”buttn CtlR”> ... </div> <a href=”#” class=”buttn”> ... </a> <div class=”buttn” data-sid=”i000000”> ... </div> 13年12月6日金曜日
- 13. .button { font-size: 13px; height: 33px; text-align: center; z-index: 2; border: 1px solid #000; } <div class=”buttn CtlR”> ... </div> <a href=”#” class=”buttn”> ... </a> <div class=”buttn” data-sid=”i000000”> ... </div> 13年12月6日金曜日
- 15. .button { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } 13年12月6日金曜日
- 16. .button { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } 13年12月6日金曜日
- 18. <head> ... <link rel="stylesheet" type="text/css" href="../css/s.css" > <link rel="stylesheet" type="text/css" href="style.css" > <link rel="stylesheet" type="text/css" href="../css/sp.css" > <link rel="stylesheet" type="text/css" href="../css/sp_2.css" > <link rel="stylesheet" type="text/css" href="real_s.css" > <link rel="stylesheet" type="text/css" href="common.css" > ... </head> 13年12月6日金曜日
- 20. 同じことを何度も... クロスブラウザ対応... 管理が... 13年12月6日金曜日
- 23. メタ言語 13年12月6日金曜日
- 25. CSS = Sass ? 13年12月6日金曜日
- 26. No 13年12月6日金曜日
- 28. 13年12月6日金曜日
- 30. 13年12月6日金曜日
- 32. CSS .touch { ... } .touch .button { ... } .touch span { color: #aaa } .touch .txt { ... } .touch a { ... } .touch a:hover { color: #aaa } .touch .sub { ... } .touch > div { color: #aaa } 13年12月6日金曜日
- 33. Sass .touch { ... } .touch .button { ... } .touch span { color: #aaa } .touch .txt { ... } .touch a { ... } .touch a:hover { color: #aaa } .touch .sub { ... } .touch > div { color: #aaa } 13年12月6日金曜日
- 38. 入れ子 13年12月6日金曜日
- 39. .button {...} .button .last {...} .button .last span {...} .button .txt {...} .button .txt .tag {...} .button .txt p {...} .button a {...} .button a:after {...} 13年12月6日金曜日
- 40. .button {...} .button .last {...} .button .last span {...} .button .txt {...} .button .txt .tag {...} .button .txt p {...} .button a {...} .button a:after {...} 13年12月6日金曜日
- 41. .button { } 13年12月6日金曜日
- 42. .button { .last { } .txt { } a { } } 13年12月6日金曜日
- 43. .button { .last {... span {...} } .txt {... .tag {...} p {...} } a {... &:after {...} } } 13年12月6日金曜日
- 44. 変数 13年12月6日金曜日
- 45. .button { font-size: 13px; } .footer .sub a { font-size: 13px; } .button_act .txt p { font-size: 13px; } 13年12月6日金曜日
- 46. .button { font-size: 13px; } .footer .sub a { font-size: 13px; } .button_act .txt p { font-size: 13px; } 13年12月6日金曜日
- 47. $base_fs = 13px; 13年12月6日金曜日
- 48. $base_fs = 13px; .button { font-size: $base_fs; } .footer .sub a { font-size: $base_fs; } .button_act .txt p { font-size: $base_fs; } 13年12月6日金曜日
- 49. 継承 13年12月6日金曜日
- 51. .twitter_button { height: 33px; border: 1px solid #000; /* 独自定義 */ } .facebook_button { height: 33px; border: 1px solid #000; /* 独自定義 */ } 13年12月6日金曜日
- 52. .twitter_button { height: 33px; border: 1px solid #000; /* 独自定義 */ } .facebook_button { height: 33px; border: 1px solid #000; /* 独自定義 */ } 13年12月6日金曜日
- 53. .twitter_button, .facebook_button { height: 33px; border: 1px solid #000; } . twitter_button { /* 独自定義 */ } .facebook_button { /* 独自定義 */ } 13年12月6日金曜日
- 54. %base_button { height: 33px; border: 1px solid #000; } 13年12月6日金曜日
- 55. %base_button { height: 33px; border: 1px solid #000; } . twitter_button { /* 独自定義 */ } .facebook_button { /* 独自定義 */ } 13年12月6日金曜日
- 56. .base_button { height: 33px; border: 1px solid #000; } . twitter_button { @extend %base_button; /* 独自定義 */ } .facebook_button { @extend %base_button; /* 独自定義 */ } 13年12月6日金曜日
- 58. .twitter_button { height: 33px; border: 1px solid #000; background-color: #66C9E9; } .facebook_button { height: 33px; border: 1px solid #000; background-color: #3C5A98; } 13年12月6日金曜日
- 59. .twitter_button { height: 33px; border: 1px solid #000; background-color: #66C9E9; } .facebook_button { height: 33px; border: 1px solid #000; background-color: #3C5A98; } 13年12月6日金曜日
- 60. .twitter_button { height: 33px; border: 1px solid #000; background-color: #66C9E9; } .facebook_button { height: 33px; border: 1px solid #000; background-color: #3C5A98; } 13年12月6日金曜日
- 61. @mixin base_button($bc) { height: 33px; border: 1px solid #000; background-color: $bc; } 13年12月6日金曜日
- 62. @mixin base_button($bc) { height: 33px; border: 1px solid #000; background-color: $bc; } 13年12月6日金曜日
- 63. @mixin base_button($bc) { height: 33px; border: 1px solid #000; background-color: $bc; } 13年12月6日金曜日
- 64. @mixin base_button($bc) { height: 33px; border: 1px solid #000; background-color: $bc; } 13年12月6日金曜日
- 65. @mixin base_button($bc) { height: 33px; border: 1px solid #000; background-color: $bc; } . twitter_button { @include base_button(#66C9E9); } .facebook_button { @include base_button(#3C5A98); } 13年12月6日金曜日
- 66. @mixin base_button($bc) { height: 33px; border: 1px solid #000; background-color: $bc; } . twitter_button { @include base_button(#66C9E9); } .facebook_button { @include base_button(#3C5A98); } 13年12月6日金曜日
- 67. @mixin base_button($bc) { height: 33px; border: 1px solid #000; background-color: $bc; } . twitter_button { @include base_button(#66C9E9); } .facebook_button { @include base_button(#3C5A98); } 13年12月6日金曜日
- 68. @mixin border-radius($br) { -webkit-border-radius: $br; -moz-border-radius: $br; -ms-border-radius: $br; -o-border-radius: $br; border-radius: $br; } 13年12月6日金曜日
- 70. <head> ... <link rel="stylesheet" type="text/css" href="../css/s.css" > <link rel="stylesheet" type="text/css" href="../css/sp.css" > <link rel="stylesheet" type="text/css" href="real_s.css" > <link rel="stylesheet" type="text/css" href="common.css" > ... </head> 13年12月6日金曜日
- 72. s.scss _sp.scss _real_s.scss _common.scss 13年12月6日金曜日
- 73. s.scss _sp.scss _real_s.scss _common.scss 13年12月6日金曜日
- 74. Sass s.scss CSS s.css @import "_sp"; @import "_real_s"; @import "_common"; /* _sp.scssに記載した内容 */ /* _real_s.scssに記載した内容 */ /* _common.scssに記載した内容 */ 13年12月6日金曜日
- 75. <head> ... <link rel="stylesheet" type="text/css" href="../css/s.css" > ... </head> 13年12月6日金曜日
- 77. 1 13年12月6日金曜日
- 79. 書かなくていい - コピペミスが減る 13年12月6日金曜日
- 80. 書かなくていい - コピペミスが減る - 記述作業が減る 13年12月6日金曜日
- 81. 2 13年12月6日金曜日
- 83. 管理が楽ちん - マージ事故が減る 13年12月6日金曜日
- 84. 管理が楽ちん - マージ事故が減る - 見通しがよくなる 13年12月6日金曜日
- 85. 3 13年12月6日金曜日
- 87. セマンティック 説明すると長いから後でググってください... 「OOCSS Sass」 13年12月6日金曜日
- 89. 組み方 13年12月6日金曜日
- 90. IE 13年12月6日金曜日
- 91. おしまい 13年12月6日金曜日