Css preprocessorの始めかた

  • 5,666 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,666
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
46
Comments
0
Likes
49

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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