Successfully reported this slideshow.
Your SlideShare is downloading. ×

Css preprocessorの始めかた

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 124 Ad
Advertisement

More Related Content

Similar to Css preprocessorの始めかた (20)

Advertisement

Recently uploaded (20)

Css preprocessorの始めかた

  1. 1. CSSの未来を先取り! CSS Preprocessorの 始めかた @adactio (CC BY2.0)
  2. 2. CSS Preprocessor
  3. 3. CSS Preprocessor
  4. 4. #main {   float: right; } #main p {   margin-bottom: 1em; }
  5. 5. #main {   float: right; } #main p {   margin-bottom: 1em; }
  6. 6. #main { #main {   float: right;     float: right; }     p { #main p {         margin-bottom: 1em;   margin-bottom: 1em;     } } }
  7. 7. CSS Preprocessor
  8. 8. CSS Preprocessor
  9. 9. +
  10. 10. Variable CSS Sprite Nesting + Mixin Vendor Prefix extend
  11. 11. 一緒に使うので いちいち覚えなくてもOK
  12. 12. Sass・Compassの メリット
  13. 13. Variable CSS Sprite Nesting + Mixin Vendor Prefix extend
  14. 14. Variable CSS Sprite Nesting + Mixin Vendor Prefix extend
  15. 15. .box {     @include border-radius(5px); }
  16. 16. .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; }
  17. 17. Variable CSS Sprite Nesting + Mixin Vendor Prefix extend
  18. 18. Variable CSS Sprite Nesting + Mixin Vendor Prefix extend
  19. 19. #main { #main {   float: right;     float: right; }     p { #main p {         margin-bottom: 1em;   margin-bottom: 1em;     } } }
  20. 20. 省力? @epSos.de (CC BY 2.0)
  21. 21. まだまだ @epSos.de (CC BY 2.0)
  22. 22. Sass #main {     margin: 5px;     a {         text-decoration: none;         &.link {             display: inline-block;         }         &:hover {             color: #F00;         }     } }
  23. 23. CSS #main {   margin: 5px; } #main a {   text-decoration: none; } #main a.link {   display: inline-block; } #main a:hover {   color: #F00; }
  24. 24. Sass #main {     margin: 5px;     a {         text-decoration: none;         &.link {             display: inline-block;         }         &:hover {             color: #F00;         }     } }
  25. 25. Sass #main {     margin: 5px;     a {         text-decoration: none;         &.link {             display: inline-block;         }         &:hover {             color: #F00;         }     } }
  26. 26. CSS #main {   margin: 5px; } #main a {   text-decoration: none; } #main a.link {   display: inline-block; } #main a:hover {   color: #F00; }
  27. 27. ZERGE_VIOLATOR (CC BY 2.0)
  28. 28. ZERGE_VIOLATOR (CC BY 2.0) Media Queries
  29. 29. #main { CSS   float: left;   width: 700px;   margin: 0 auto; } @media screen and (max-width: 640px) {   #main {     float: none;     width: 100%;   } }
  30. 30. Sass #main {     float: left;     width: 700px;     margin: 0 auto;     @media screen and (max-width:640px) {         float: none;         width: 100%;     } }
  31. 31. #main { CSS   float: left;   width: 700px;   margin: 0 auto; } @media screen and (max-width: 640px) {   #main {     float: none;     width: 100%;   } }
  32. 32. #main { CSS   float: left;   width: 700px;   margin: 0 auto; } @media screen and (max-width: 640px) {   #main {     float: none;     width: 100%;   } }
  33. 33. Sass #main {     float: left;     width: 700px;     margin: 0 auto;     @media screen and (max-width:640px) {         float: none;         width: 100%;     } }
  34. 34. Sass #main {     float: left;     width: 700px;     margin: 0 auto;     @media screen and (max-width:640px) {         float: none;         width: 100%;     } }
  35. 35. Variable CSS Sprite Nesting + Mixin Vendor Prefix extend
  36. 36. Variable CSS Sprite Nesting + Mixin Vendor Prefix extend
  37. 37. photo by pakutaso.com
  38. 38. 座標・幅 ブラウザ 指定 キャッシュ photo by pakutaso.com
  39. 39. 座標・幅 ブラウザ 指定 キャッシュ めんどくさい。 photo by pakutaso.com
  40. 40. 読み込み
  41. 41. 読み込み $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"); }
  42. 42. .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"); }
  43. 43. .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; }
  44. 44. .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; }
  45. 45. Variable CSS Sprite Nesting + Mixin Vendor Prefix extend
  46. 46. @import url(reset.css); @import url(module.css); @import url(style.css); import.css #main {   float: right; } #main p {   margin-bottom: 1em; }
  47. 47. @import url(reset.css); △ @import url(module.css); @import url(style.css); import.css #main {   float: right; } #main p {   margin-bottom: 1em; }
  48. 48. @import url(reset.css); △ @import url(module.css); @import url(style.css); import.css #main {↓   float: right;↓ .... }↓ #main p { ↓   margin-bottom: 1em;↓ .... }
  49. 49. @import url(reset.css); △ @import url(module.css); @import url(style.css); import.css #main {↓   float: right;↓ .... △ }↓ #main p { ↓   margin-bottom: 1em;↓ .... }
  50. 50. @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 { }
  51. 51. #main {↓   float: right;↓ .... }↓ #main p { ↓   margin-bottom: 1em;↓ .... }
  52. 52. #main {↓   float: right;↓ .... }↓ #main p { ↓   margin-bottom: 1em;↓ .... } $compass compile -s compressed style.scss
  53. 53. #main {↓   float: right;↓ .... }↓ #main p { ↓   margin-bottom: 1em;↓ .... } $compass compile -s compressed style.scss
  54. 54. #main {↓   float: right;↓ .... }↓ #main p { ↓   margin-bottom: 1em;↓ .... } $compass compile -s compressed style.scss #main{float:right;}#main p{margin-bottom:1em;}
  55. 55. @flickrized (CC BY 2.0) Try it!
  56. 56. × お試しなので、 コマンドプロンプトは使いません
  57. 57. インストーラーをダウンロード Scout - Compass and Sass without all the hassle http://mhs.github.com/scout-app/
  58. 58. インストーラーをダウンロード
  59. 59. インストーラーに従って 進むだけ
  60. 60. Input Folder Sassファイルのディレクトリ
  61. 61. Input Folder Sassファイルのディレクトリ Output Folder CSSファイルのディレクトリ
  62. 62. site_data Input Folder _scss style.scss Output Folder css style.css
  63. 63. Images Folder 画像フォルダー(Sprite時)
  64. 64. Images Folder 画像フォルダー(Sprite時) Output Style 書き出しスタイル Nested 入れ子で Expanded よく書く感じの Compact 1行スタイル Compressed 改行スペース削除
  65. 65. Nested #main {   width: 700px;   float: left; }   #main p {     margin: 5px; }
  66. 66. Expanded #main {   width: 700px;   float: left; } #main p {   margin: 5px; }
  67. 67. Compact #main { width: 700px; float: left; } #main p { margin: 5px; }
  68. 68. Compressed #main{width:700px;float:left}#main p{margin:5px}
  69. 69. ファイル 可読性 サイズ 高 大 Nested 入れ子で Expanded よく書く感じの Compact 1行スタイル Compressed 改行スペース削除 低 低
  70. 70. ファイル 可読性 サイズ 高 大 Nested 入れ子で Expanded よく書く感じの Compact 1行スタイル Compressed 改行スペース削除 低 低
  71. 71. ファイル 可読性 サイズ 高 大 Nested 作業中 入れ子で Expanded よく書く感じの Compact 1行スタイル Compressed 改行スペース削除 低 低 リリース時
  72. 72. Images Folder 画像フォルダー(Sprite時) Output Style 書き出しスタイル Nested 入れ子で Expanded よく書く感じの Compact 1行スタイル Compressed 改行スペース削除
  73. 73. style.scss
  74. 74. style.scss
  75. 75. style.scss style.css
  76. 76. × style.scss style.css
  77. 77. site_data _scss style.scss css
  78. 78. site_data _scss style.scss css
  79. 79. site_data _scss 保存 style.scss css style.css
  80. 80. Try! Try! @Camera Eye Photography (CC BY 2.0) Try!
  81. 81. ま ず は 、 を 作って、 のコ ピー イト 既存のサ 実 験 ! の 中 で そ
  82. 82. Sassのあるある Sassのあるある @erix! (CC BY 2.0)
  83. 83. >>> Change detected at 16:05:43 to: style.scss error style.scss (Line 6: Undefined mixin 'border-radius'.) overwrite style.css この前後が あやしい
  84. 84. CSS3のベンダープリフィックスには、 Compassをインポートします
  85. 85. この前後が あやしい >>> Change detected at 16:41:11 to: style.scss error style.scss (Line 4: Invalid CSS after " / zoom": expected ///, was ":1;") overwrite style.css
  86. 86. プロパティの前に「/」があると エラーを返します
  87. 87. まとめ
  88. 88. 最初は @mikebaird (CC BY 2.0) 難しい
  89. 89. 慣れたら 最強 @mikebaird (CC BY 2.0)
  90. 90. CSSの文法が正しければコンパイルOK IE用ハックを書き換えるぐらい 既存のCSSをScoutに通してエラーを 一つ一つ潰す
  91. 91. Try! Try! @Camera Eye Photography (CC BY 2.0) Try!
  92. 92. ま ず は 、 を 作って、 のコ ピー イト 既存のサ 実 験 ! の 中 で そ
  93. 93. @owenwbrown (CC BY 2.0)
  94. 94. 参考ページ
  95. 95. 【Sassを覚えよう!】もくじ的なのと参考リンク - CSS HappyLife http://css-happylife.com/archives/2012/0130_0415.php
  96. 96. DreamweaverでSassファイルを編集するには? ¦ Webデザインのタネ http://oshare.jugem.cc/?eid=795

×