Css preprocessorの始めかた

6,586 views
6,334 views

Published on

前知識がない人のためのSassの始めかたです。

Published in: Technology
0 Comments
49 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,586
On SlideShare
0
From Embeds
0
Number of Embeds
626
Actions
Shares
0
Downloads
48
Comments
0
Likes
49
Embeds 0
No embeds

No notes for slide

Css preprocessorの始めかた

  1. 1. CSSの未来を先取り!CSS Preprocessorの始めかた @adactio (CC BY2.0)
  2. 2. CSSPreprocessor
  3. 3. CSSPreprocessor
  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. CSSPreprocessor
  8. 8. CSSPreprocessor
  9. 9. +
  10. 10. Variable CSS SpriteNesting + Mixin Vendor Prefix extend
  11. 11. 一緒に使うのでいちいち覚えなくてもOK
  12. 12. Sass・Compassの メリット
  13. 13. Variable CSS SpriteNesting + Mixin Vendor Prefix extend
  14. 14. Variable CSS SpriteNesting + 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 SpriteNesting + Mixin Vendor Prefix extend
  18. 18. Variable CSS SpriteNesting + 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 SpriteNesting + Mixin Vendor Prefix extend
  36. 36. Variable CSS SpriteNesting + 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 SpriteNesting + 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 hasslehttp://mhs.github.com/scout-app/
  58. 58. インストーラーをダウンロード
  59. 59. インストーラーに従って 進むだけ
  60. 60. Input FolderSassファイルのディレクトリ
  61. 61. Input FolderSassファイルのディレクトリ Output FolderCSSファイルのディレクトリ
  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.scsserror style.scss (Line 6: Undefined mixinborder-radius.)overwrite style.css この前後が あやしい
  84. 84. CSS3のベンダープリフィックスには、 Compassをインポートします
  85. 85. この前後が あやしい>>> Change detected at 16:41:11 to: style.scsserror 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の文法が正しければコンパイルOKIE用ハックを書き換えるぐらい既存の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 HappyLifehttp://css-happylife.com/archives/2012/0130_0415.php
  96. 96. DreamweaverでSassファイルを編集するには? ¦ Webデザインのタネhttp://oshare.jugem.cc/?eid=795

×