StartUp Sass + Compass [基本と活用]

8,887 views

Published on

Published in: Technology
  • Please dear can you contact me on my email id jessicaduale@yahoo.com, i have something private to discuss with you. Thank, i will be happy to meet you in my email. Jessica
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

StartUp Sass + Compass [基本と活用]

  1. 1. 第1回 Creators Meetup : StartUp Sass+Compass ∼基本と活用∼ 大竹孔明Sunday, 24 February 13
  2. 2. 大竹 孔明 こうめ コーディングを中心に Twitter : @Bamboo_C Web制作をしています Facebook : komei.otakeSunday, 24 February 13
  3. 3. ぴっちぴちの22歳ですSunday, 24 February 13
  4. 4. Arcted arcted.jpSunday, 24 February 13
  5. 5. 公開 NameCard.jp http://name-card.jp 製作中 擬人化CSS リファレンスサイト http://www.facebook.com/ gcss.referenceSunday, 24 February 13
  6. 6. 現在のキャラの半数がSunday, 24 February 13
  7. 7. 現在のキャラの半数が 未亡人Sunday, 24 February 13
  8. 8. Sunday, 24 February 13
  9. 9. ぴっちぴちの22歳ですSunday, 24 February 13
  10. 10. ご期待ください!Sunday, 24 February 13
  11. 11. 本日の内容 • 基本の記述方法の復習 • ファイルの管理と運用の注意点 • Compassを使おうSunday, 24 February 13
  12. 12. 本日の内容 • 基本の記述方法の復習 • ファイルの管理と運用の注意点 • Compassを使おうSunday, 24 February 13
  13. 13. 本日の内容 • 基本の記述方法の復習 • ファイルの管理と運用の注意点 • Compassを使おうSunday, 24 February 13
  14. 14. 本日の内容 • 基本の記述方法の復習 • ファイルの管理と運用の注意点 • Compassを使おうSunday, 24 February 13
  15. 15. 基本の記述方法の復習Sunday, 24 February 13
  16. 16. DEMO ネストSunday, 24 February 13
  17. 17. CSS .wrap { width: 80px; height: 80px; } .wrap .inner { border: 1px solid #ededed; }Sunday, 24 February 13
  18. 18. SCSS .wrap { width: 80px; height: 80px; .inner { border: 1px solid #ededed; } }Sunday, 24 February 13
  19. 19. SCSS .wrap { width: 80px; 入れ子に出来る height: 80px; .inner { border: 1px solid #ededed; } }Sunday, 24 February 13
  20. 20. SCSS CSS .wrap { .wrap { width: 80px; width: 80px; height: 80px; height: 80px; .inner { } border: 1px .. .wrap .inner { } border: 1px soli.. } }Sunday, 24 February 13
  21. 21. DEMO @media指定のネストSunday, 24 February 13
  22. 22. CSS .wrap { width: 1000px; } @media screen and (max-width:600px) {  .wrap { width: 100%; } }Sunday, 24 February 13
  23. 23. SCSS .wrap { width: 1000px; @media screen and (max-width:600px) { width: 100%; } }Sunday, 24 February 13
  24. 24. SCSS 入れ子に出来る .wrap { width: 1000px; @media screen and (max-width:600px) { width: 100%; } }Sunday, 24 February 13
  25. 25. SCSS CSS .wrap { .wrap { width: 1000px; width: 1000px; @media screen a.. } width: 100%; @media screen and.. }  .wrap { } width: 100%; } }Sunday, 24 February 13
  26. 26. DEMO 親セレクタの参照Sunday, 24 February 13
  27. 27. CSS a{ display: block; } a:hover { background: #ededed; }Sunday, 24 February 13
  28. 28. SCSS a{ display: block; &:hover { background: #ededed; } }Sunday, 24 February 13
  29. 29. SCSS 入れ子に出来る a{ display: block; &:hover { background: #ededed; } }Sunday, 24 February 13
  30. 30. SCSS CSS a{ a{ display: block; display: block; &:hover { } background: ... a:hover { } background: # ... } }Sunday, 24 February 13
  31. 31. DEMO 変数Sunday, 24 February 13
  32. 32. CSS .wrap { background: #ededed; } .wrap a { color: green; }Sunday, 24 February 13
  33. 33. SCSS $mainColor: #ededed; $keyColor: green; .wrap { background: $mainColor; a{ $keyColor: green; } }Sunday, 24 February 13
  34. 34. SCSS $mainColor: #ededed; $keyColor: green; .wrap { 定義した値を background: $mainColor; a{ color: $keyColor; } }Sunday, 24 February 13
  35. 35. SCSS $mainColor: #ededed; $keyColor: green; .wrap { 指定できる background: $mainColor; a{ color: $keyColor; } }Sunday, 24 February 13
  36. 36. SCSS CSS $mainColor: #ede.. $keyColor: green; .wrap { background: #.. .wrap { } background: $.. .wrap a { a{ color: green; $keyColor: g.. } } }Sunday, 24 February 13
  37. 37. DEMO 演算Sunday, 24 February 13
  38. 38. CSS .wrap { width: 80px; padding: 10px; }Sunday, 24 February 13
  39. 39. SCSS $widthType1: 100px; .wrap { $paddingType1: 10px; width: $widthType1 - ( $paddingType1 * 2 ); padding: $paddingType1; }Sunday, 24 February 13
  40. 40. SCSS マイナス $widthType1: 100px; 乗算 .wrap { $paddingType1: 10px; width: $widthType1 - ( $paddingType1 * 2 ); padding: $paddingType1; }Sunday, 24 February 13
  41. 41. SCSS CSS $widthType1: 100.. .wrap { .wrap { width: 80px; $paddingType1 .. padding: 10px; width: $widthTy .. } padding: $padd .. }Sunday, 24 February 13
  42. 42. DEMO Mixin(ミックスイン)Sunday, 24 February 13
  43. 43. @mixin rounded-top { $side: top; SCSS $radius: 10px; border-#{$side}-radius: $radius; -moz-border-radius-#{$side}: $radius; -webkit-border-#{$side}-radius: $radius; } #navbar li { @include rounded-top; }Sunday, 24 February 13
  44. 44. @mixin rounded-top { $side: top; SCSS $radius: 10px; @mixinで ブロックを括って border-#{$side}-radius: $radius; -moz-border-radius-#{$side}: $radius; -webkit-border-#{$side}-radius: $radius; } @includeで #navbar li { 呼び出す! @include rounded-top; }Sunday, 24 February 13
  45. 45. CSS #navbar li { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; }Sunday, 24 February 13
  46. 46. SCSS CSS @mixin rounded-top { $side: top; $radius: 10px; #navbar li { border-top-ra .. border-#{$side}-radius: .. -moz-border-r .. -moz-border-radius-#{$ .. -webkit-border-#{$side} .. -webkit-border .. } } #navbar li { @include rounded-top .. }Sunday, 24 February 13
  47. 47. DEMO extend(エクステンド)Sunday, 24 February 13
  48. 48. SCSS .button-type1 { width: 100px; border: 1px solid #5f5f5f; } .button-type2 { @extend .button-type1; border-color: #000; }Sunday, 24 February 13
  49. 49. SCSS .button-type1 { width: 100px; border: 1px solid #5f5f5f; } 値の継承 .button-type2 { @extend .button-type1; border-color: #000; }Sunday, 24 February 13
  50. 50. .button-type1 { CSS width: 100px; border: 1px solid #5f5f5f; } .button-type2 { width: 100px; border: 1px solid #5f5f5f; border-color: #000; }Sunday, 24 February 13
  51. 51. SCSS CSS .button-type1 { .button-type1 { width: 100px; width: 100px; border: 1px soli .. border: 1px soli .. } } .button-type2 { .button-type2 { width: 100px; @extend .button .. border: 1px soli .. border-color: #0 .. border-color: # .. } }Sunday, 24 February 13
  52. 52. DEMO ちょっとした注意点Sunday, 24 February 13
  53. 53. インポレーションSunday, 24 February 13
  54. 54. 変数はプロパティ名にも使えますSunday, 24 February 13
  55. 55. #{} で囲むのを わすれずに! $side: top; border-#{$side}-radius: $radius;Sunday, 24 February 13
  56. 56. 16進数でカラーを指定Sunday, 24 February 13
  57. 57. $c1: #fff; Compile whiteSunday, 24 February 13
  58. 58. !?Sunday, 24 February 13
  59. 59. Rubyファイルをごにょごにょすれば いけるらしいです www.xenophy.com/sass/4148Sunday, 24 February 13
  60. 60. #fffffeで逃げるという手m..Sunday, 24 February 13
  61. 61. ファイルの管理と 運用の注意点Sunday, 24 February 13
  62. 62. DEMO ファイルの管理Sunday, 24 February 13
  63. 63. 先頭にアンダースコア( _ )が付い ているファイルはコンパイルしても CSSに変換されない、インポート専 用のファイルです。Sunday, 24 February 13
  64. 64. これを利用して、用途によって切り 分けてみましょう。Sunday, 24 February 13
  65. 65. ファイル構成 style.scss _mq_tb.scss _mq_sp.scss _module.scssSunday, 24 February 13
  66. 66. ファイル構成 style.scss _mq_tb.scss _mq_sp.scss _module.scss コンパイルしても CSSは書き出されない!Sunday, 24 February 13
  67. 67. 読み込み方法 @import “mq_tb”;Sunday, 24 February 13
  68. 68. 拡張子はいらないの?Sunday, 24 February 13
  69. 69. .scss  .sass 両方いけるように 拡張子は不要な設計となっているようですSunday, 24 February 13
  70. 70. DEMO Output StyleSunday, 24 February 13
  71. 71. Sunday, 24 February 13
  72. 72. NESTEDSunday, 24 February 13
  73. 73. COMPACTSunday, 24 February 13
  74. 74. EXPANDED いつもの!Sunday, 24 February 13
  75. 75. COMPRESSED 高圧縮!Sunday, 24 February 13
  76. 76. 開発時 納品時 EXPANDED EXPANDED + COMPRESSEDSunday, 24 February 13
  77. 77. DEMO コメントでしっかり管理Sunday, 24 February 13
  78. 78. 基本編でやったように、 Sassは今までのCSSと 少し書き方が違いますSunday, 24 February 13
  79. 79. 演算 extend 変数 ネスト 関数 Mixin 親要素参照 if文Sunday, 24 February 13
  80. 80. 無敵だSunday, 24 February 13
  81. 81. でもちょっと待って下さいSunday, 24 February 13
  82. 82. オレオレCSSは考えものSunday, 24 February 13
  83. 83. 最悪の場合 他のスタッフはおろか ? 自分すら解読不可能に..Sunday, 24 February 13
  84. 84. コメント管理は必須!Sunday, 24 February 13
  85. 85. CompileSunday, 24 February 13
  86. 86. // のコメントは SCSSに関するコメント /**/ のコメントは CSSに関するコメントSunday, 24 February 13
  87. 87. • Sassでの複数ファイルの管理は(_) partials(パーシャル)を使う • 適切なフォーマットでコンパイル • 複雑過ぎる記述は避ける • コメントはしっかり残すSunday, 24 February 13
  88. 88. Compassを使おうSunday, 24 February 13
  89. 89. DEMO Compassの初期設定Sunday, 24 February 13
  90. 90. ターミナルで下記のコマンドを入力 gem update --system gem install compass ※環境によって sudo を頭につけて実行しないと 出来ない場合もありますSunday, 24 February 13
  91. 91. 早速使ってみましょう!Sunday, 24 February 13
  92. 92. @importでCompassの機能を使う @import "compass/css3/border-radius"; @import "compass/css3/"; @import "compass/utilities" @import "compass" @import "compass/reset/";Sunday, 24 February 13
  93. 93. @importでCompassの機能を使う @import "compass/css3/border-radius"; @import "compass/css3/"; @import "compass/utilities" border-radiusのみインポート @import "compass" @import "compass/reset/";Sunday, 24 February 13
  94. 94. @importでCompassの機能を使う @import "compass/css3/border-radius"; @import "compass/css3/"; @import "compass/utilities" CSS3に関するミックスインを @import "compass" すべてインポート @import "compass/reset/";Sunday, 24 February 13
  95. 95. @importでCompassの機能を使う @import "compass/css3/border-radius"; @import "compass/css3/"; @import "compass/utilities" @import "compass" clearfixなどのユーティリティ @import "compass/reset/"; 系をインポートSunday, 24 February 13
  96. 96. @importでCompassの機能を使う Compassのすべて機能を @import "compass/css3/border-radius"; @import "compass/css3/"; インポート @import "compass/utilities" @import "compass" @import "compass/reset/";Sunday, 24 February 13
  97. 97. @importでCompassの機能を使う @import "compass/css3/border-radius"; @import "compass/css3/"; リセット用CSSをインポート @import "compass/utilities" @import "compass" @import "compass/reset/";Sunday, 24 February 13
  98. 98. @compassで全ての機能をイン ポートできますが、リセットのみは 個別でやらないとインポートできな いので注意!Sunday, 24 February 13
  99. 99. DEMO Compass CSS Sprite ToolSunday, 24 February 13
  100. 100. っていう位にこの機能が便利Sunday, 24 February 13
  101. 101. img sprite イメージフォルダの直下に sprite用のフォルダを作成Sunday, 24 February 13
  102. 102. img sprite a.png b.png c.png スプライトにしたい画像を 放り込む!Sunday, 24 February 13
  103. 103. CompileSunday, 24 February 13
  104. 104. img sprite a.png b.png c.png spritehogehoge.png なんか出来てる!Sunday, 24 February 13
  105. 105. Sunday, 24 February 13
  106. 106. 早速使ってみよう!Sunday, 24 February 13
  107. 107. 画像の結合 $sprite: sprite-map("hoge/*.png"); sprite画像を入れたフォルダ名Sunday, 24 February 13
  108. 108. 画像の出力 background-image: $sprite; background-position: sprite-position($sprite, file-name); 先程作った変数の名前Sunday, 24 February 13
  109. 109. 画像の出力 background-image: $sprite; background-position: sprite-position($sprite, file-name); 出力したい画像のファイル名Sunday, 24 February 13
  110. 110. 横幅や縦のサイズを取得 width: image-width("hoge/file-name.png"); height: image-height("hoge/file-name.png"); 画像のパスSunday, 24 February 13
  111. 111. 他にもいくつか指定を加える display: block; background-repeat: no-repeat;Sunday, 24 February 13
  112. 112. DEMO Codekitでの利用Sunday, 24 February 13
  113. 113. CodeKitSunday, 24 February 13
  114. 114. 黒い画面、怖いですよね?Sunday, 24 February 13
  115. 115. CodeKitならSunday, 24 February 13
  116. 116. Sunday, 24 February 13
  117. 117. ドラッグアンドドロップ CodeKit に D&D するだけSunday, 24 February 13
  118. 118. 新規にCompassプロジェクトを作成するSunday, 24 February 13
  119. 119. 既存のプロジェクトでCompassを利用するSunday, 24 February 13
  120. 120. Compass をインストールするSunday, 24 February 13
  121. 121. Compassを設定する 相対パス にするSunday, 24 February 13
  122. 122. Compassを設定する 相対パス にするSunday, 24 February 13
  123. 123. CodeKitでできること • Sassをはじめとする主要な     CSS Preprocesserのコンパイル • JSのファイルのミニファイ・統合 • ブラウザのオートリロード • Compassなどの利用 Etc.Sunday, 24 February 13
  124. 124. DEMO BourbonSunday, 24 February 13
  125. 125. ありがとうございました! 大竹孔明Sunday, 24 February 13

×