More Related Content
What's hot (9)
Similar to Css preprocessorの始めかた (20)
Recently uploaded (7)
Css preprocessorの始めかた
- 1. CSSの未来を先取り！ CSS Preprocessorの 始めかた @adactio (CC BY2.0)
- 4. #main { float: right; } #main p { margin-bottom: 1em; }
- 5. #main { float: right; } #main p { margin-bottom: 1em; }
- 6. #main { #main { float: right; float: right; } p { #main p { margin-bottom: 1em; margin-bottom: 1em; } } }
- 11. +
- 12. Variable CSS Sprite Nesting + Mixin Vendor Prefix extend
- 14. Sass・Compassの メリット
- 15. Variable CSS Sprite Nesting + Mixin Vendor Prefix extend
- 16. Variable CSS Sprite Nesting + Mixin Vendor Prefix extend
- 18. .box { @include border-radius(5px); } .box { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }
- 19. Variable CSS Sprite Nesting + Mixin Vendor Prefix extend
- 20. Variable CSS Sprite Nesting + Mixin Vendor Prefix extend
- 21. #main { #main { float: right; float: right; } p { #main p { margin-bottom: 1em; margin-bottom: 1em; } } }
- 22. 省力？ @epSos.de (CC BY 2.0)
- 23. まだまだ @epSos.de (CC BY 2.0)
- 24. Sass #main { margin: 5px; a { text-decoration: none; &.link { display: inline-block; } &:hover { color: #F00; } } }
- 25. CSS #main { margin: 5px; } #main a { text-decoration: none; } #main a.link { display: inline-block; } #main a:hover { color: #F00; }
- 26. Sass #main { margin: 5px; a { text-decoration: none; &.link { display: inline-block; } &:hover { color: #F00; } } }
- 27. Sass #main { margin: 5px; a { text-decoration: none; &.link { display: inline-block; } &:hover { color: #F00; } } }
- 28. CSS #main { margin: 5px; } #main a { text-decoration: none; } #main a.link { display: inline-block; } #main a:hover { color: #F00; }
- 29. ZERGE_VIOLATOR (CC BY 2.0)
- 30. ZERGE_VIOLATOR (CC BY 2.0) Media Queries
- 32. #main { CSS float: left; width: 700px; margin: 0 auto; } @media screen and (max-width: 640px) { #main { float: none; width: 100%; } }
- 33. Sass #main { float: left; width: 700px; margin: 0 auto; @media screen and (max-width:640px) { float: none; width: 100%; } }
- 34. #main { CSS float: left; width: 700px; margin: 0 auto; } @media screen and (max-width: 640px) { #main { float: none; width: 100%; } }
- 35. #main { CSS float: left; width: 700px; margin: 0 auto; } @media screen and (max-width: 640px) { #main { float: none; width: 100%; } }
- 36. Sass #main { float: left; width: 700px; margin: 0 auto; @media screen and (max-width:640px) { float: none; width: 100%; } }
- 37. Sass #main { float: left; width: 700px; margin: 0 auto; @media screen and (max-width:640px) { float: none; width: 100%; } }
- 38. Variable CSS Sprite Nesting + Mixin Vendor Prefix extend
- 39. Variable CSS Sprite Nesting + Mixin Vendor Prefix extend
- 41. 座標・幅 ブラウザ 指定 キャッシュ photo by pakutaso.com
- 42. 座標・幅 ブラウザ 指定 キャッシュ めんどくさい。 photo by pakutaso.com
- 45. 読み込み
- 46. 読み込み $share-sprite: sprite-map("share/*.png"); $share-sprite-url: sprite-url($share-sprite); .logoArea { text-indent: 100%; overflow: hidden; white-space: normal; width: image-width(sprite-file($share-sprite,"logo")); height: image-height(sprite-file($share-sprite,"logo")); background-image: $share-sprite-url; background-repeat: no-repeat; background-position: sprite-position($share-sprite,"logo"); }
- 47. .logoArea { text-indent: 100%; overflow: hidden; white-space: normal; width: image-width(sprite-file($share-sprite,"logo")); height: image-height(sprite-file($share-sprite,"logo")); background-image: $share-sprite-url; background-repeat: no-repeat; background-position: sprite-position($share-sprite,"logo"); }
- 48. .logoArea { text-indent: 100%; overflow: hidden; white-space: normal; width: image-width(sprite-file($share-sprite,"logo")); height: image-height(sprite-file($share-sprite,"logo")); background-image: $share-sprite-url; background-repeat: no-repeat; background-position: sprite-position($share-sprite,"logo"); } .logoArea { text-indent: 100%; overflow: hidden; white-space: normal; width: 419px; height: 62px; background-image: url('/img/share-s6664b1cfc3.png'); background-repeat: no-repeat; background-position: 0 0; }
- 49. .logoArea { text-indent: 100%; overflow: hidden; white-space: normal; width: image-width(sprite-file($share-sprite,"logo")); height: image-height(sprite-file($share-sprite,"logo")); background-image: $share-sprite-url; background-repeat: no-repeat; background-position: sprite-position($share-sprite,"logo"); } .logoArea { text-indent: 100%; overflow: hidden; white-space: normal; width: 419px; height: 62px; background-image: url('/img/share-s6664b1cfc3.png'); background-repeat: no-repeat; background-position: 0 0; }
- 50. Variable CSS Sprite Nesting + Mixin Vendor Prefix extend
- 51. @import url(reset.css); @import url(module.css); @import url(style.css); import.css #main { float: right; } #main p { margin-bottom: 1em; }
- 52. @import url(reset.css); △ @import url(module.css); @import url(style.css); import.css #main { float: right; } #main p { margin-bottom: 1em; }
- 53. @import url(reset.css); △ @import url(module.css); @import url(style.css); import.css #main {↓ float: right;↓ .... }↓ #main p { ↓ margin-bottom: 1em;↓ .... }
- 54. @import url(reset.css); △ @import url(module.css); @import url(style.css); import.css #main {↓ float: right;↓ .... △ }↓ #main p { ↓ margin-bottom: 1em;↓ .... }
- 55. @import "reset"; @import "module"; @import "style"; import.scss /*--- reset */ html { overflow-y: scroll; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3, import.css #header { }
- 56. #main {↓ float: right;↓ .... }↓ #main p { ↓ margin-bottom: 1em;↓ .... }
- 57. #main {↓ float: right;↓ .... }↓ #main p { ↓ margin-bottom: 1em;↓ .... } $compass compile -s compressed style.scss
- 58. #main {↓ float: right;↓ .... }↓ #main p { ↓ margin-bottom: 1em;↓ .... } $compass compile -s compressed style.scss
- 59. #main {↓ float: right;↓ .... }↓ #main p { ↓ margin-bottom: 1em;↓ .... } $compass compile -s compressed style.scss #main{float:right;}#main p{margin-bottom:1em;}
- 60. @flickrized (CC BY 2.0) Try it!
- 63. インストーラーをダウンロード Scout - Compass and Sass without all the hassle http://mhs.github.com/scout-app/
- 64. インストーラーをダウンロード
- 65. インストーラーに従って 進むだけ
- 72. Input Folder Sassファイルのディレクトリ Output Folder CSSファイルのディレクトリ
- 73. site_data Input Folder _scss style.scss Output Folder css style.css
- 77. Images Folder 画像フォルダー（Sprite時） Output Style 書き出しスタイル Nested 入れ子で Expanded よく書く感じの Compact 1行スタイル Compressed 改行スペース削除
- 78. Nested #main { width: 700px; float: left; } #main p { margin: 5px; }
- 79. Expanded #main { width: 700px; float: left; } #main p { margin: 5px; }
- 80. Compact #main { width: 700px; float: left; } #main p { margin: 5px; }
- 82. ファイル 可読性 サイズ 高 大 Nested 入れ子で Expanded よく書く感じの Compact 1行スタイル Compressed 改行スペース削除 低 低
- 83. ファイル 可読性 サイズ 高 大 Nested 入れ子で Expanded よく書く感じの Compact 1行スタイル Compressed 改行スペース削除 低 低
- 84. ファイル 可読性 サイズ 高 大 Nested 作業中 入れ子で Expanded よく書く感じの Compact 1行スタイル Compressed 改行スペース削除 低 低 リリース時
- 85. Images Folder 画像フォルダー（Sprite時） Output Style 書き出しスタイル Nested 入れ子で Expanded よく書く感じの Compact 1行スタイル Compressed 改行スペース削除
- 88. style.scss
- 89. style.scss
- 90. style.scss style.css
- 91. × style.scss style.css
- 92. site_data _scss style.scss css
- 93. site_data _scss style.scss css
- 94. site_data _scss 保存 style.scss css style.css
- 95. Try! Try! @Camera Eye Photography (CC BY 2.0) Try!
- 96. ま ず は 、 を 作って、 のコ ピー イト 既存のサ 実 験 ！ の 中 で そ
- 97. Sassのあるある Sassのあるある @erix! (CC BY 2.0)
- 100. >>> Change detected at 16:05:43 to: style.scss error style.scss (Line 6: Undefined mixin 'border-radius'.) overwrite style.css この前後が あやしい
- 102. CSS3のベンダープリフィックスには、 Compassをインポートします
- 108. この前後が あやしい >>> Change detected at 16:41:11 to: style.scss error style.scss (Line 4: Invalid CSS after " / zoom": expected ///, was ":1;") overwrite style.css
- 110. プロパティの前に「/」があると エラーを返します
- 115. まとめ
- 116. 最初は @mikebaird (CC BY 2.0) 難しい
- 117. 慣れたら 最強 @mikebaird (CC BY 2.0)
- 119. Try! Try! @Camera Eye Photography (CC BY 2.0) Try!
- 120. ま ず は 、 を 作って、 のコ ピー イト 既存のサ 実 験 ！ の 中 で そ
- 121. @owenwbrown (CC BY 2.0)
- 122. 参考ページ
- 123. 【Sassを覚えよう！】もくじ的なのと参考リンク - CSS HappyLife http://css-happylife.com/archives/2012/0130_0415.php