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