• Like
StartUp Sass + Compass [基本と活用]
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

StartUp Sass + Compass [基本と活用]

  • 7,420 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
7,420
On SlideShare
0
From Embeds
0
Number of Embeds
13

Actions

Shares
Downloads
48
Comments
1
Likes
44

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. 第1回 Creators Meetup : StartUp Sass+Compass ∼基本と活用∼ 大竹孔明Sunday, 24 February 13
  • 2. 大竹 孔明 こうめ コーディングを中心に Twitter : @Bamboo_C Web制作をしています Facebook : komei.otakeSunday, 24 February 13
  • 3. ぴっちぴちの22歳ですSunday, 24 February 13
  • 4. Arcted arcted.jpSunday, 24 February 13
  • 5. 公開 NameCard.jp http://name-card.jp 製作中 擬人化CSS リファレンスサイト http://www.facebook.com/ gcss.referenceSunday, 24 February 13
  • 6. 現在のキャラの半数がSunday, 24 February 13
  • 7. 現在のキャラの半数が 未亡人Sunday, 24 February 13
  • 8. Sunday, 24 February 13
  • 9. ぴっちぴちの22歳ですSunday, 24 February 13
  • 10. ご期待ください!Sunday, 24 February 13
  • 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. 基本の記述方法の復習Sunday, 24 February 13
  • 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. インポレーションSunday, 24 February 13
  • 54. 変数はプロパティ名にも使えますSunday, 24 February 13
  • 55. #{} で囲むのを わすれずに! $side: top; border-#{$side}-radius: $radius;Sunday, 24 February 13
  • 56. 16進数でカラーを指定Sunday, 24 February 13
  • 57. $c1: #fff; Compile whiteSunday, 24 February 13
  • 58. !?Sunday, 24 February 13
  • 59. Rubyファイルをごにょごにょすれば いけるらしいです www.xenophy.com/sass/4148Sunday, 24 February 13
  • 60. #fffffeで逃げるという手m..Sunday, 24 February 13
  • 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.scssSunday, 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. 拡張子はいらないの?Sunday, 24 February 13
  • 69. .scss  .sass 両方いけるように 拡張子は不要な設計となっているようですSunday, 24 February 13
  • 70. DEMO Output StyleSunday, 24 February 13
  • 71. Sunday, 24 February 13
  • 72. NESTEDSunday, 24 February 13
  • 73. COMPACTSunday, 24 February 13
  • 74. EXPANDED いつもの!Sunday, 24 February 13
  • 75. COMPRESSED 高圧縮!Sunday, 24 February 13
  • 76. 開発時 納品時 EXPANDED EXPANDED + COMPRESSEDSunday, 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. 無敵だSunday, 24 February 13
  • 81. でもちょっと待って下さいSunday, 24 February 13
  • 82. オレオレCSSは考えものSunday, 24 February 13
  • 83. 最悪の場合 他のスタッフはおろか ? 自分すら解読不可能に..Sunday, 24 February 13
  • 84. コメント管理は必須!Sunday, 24 February 13
  • 85. CompileSunday, 24 February 13
  • 86. // のコメントは SCSSに関するコメント /**/ のコメントは CSSに関するコメントSunday, 24 February 13
  • 87. • Sassでの複数ファイルの管理は(_) partials(パーシャル)を使う • 適切なフォーマットでコンパイル • 複雑過ぎる記述は避ける • コメントはしっかり残すSunday, 24 February 13
  • 88. Compassを使おうSunday, 24 February 13
  • 89. DEMO Compassの初期設定Sunday, 24 February 13
  • 90. ターミナルで下記のコマンドを入力 gem update --system gem install compass ※環境によって sudo を頭につけて実行しないと 出来ない場合もありますSunday, 24 February 13
  • 91. 早速使ってみましょう!Sunday, 24 February 13
  • 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 ToolSunday, 24 February 13
  • 100. っていう位にこの機能が便利Sunday, 24 February 13
  • 101. img sprite イメージフォルダの直下に sprite用のフォルダを作成Sunday, 24 February 13
  • 102. img sprite a.png b.png c.png スプライトにしたい画像を 放り込む!Sunday, 24 February 13
  • 103. CompileSunday, 24 February 13
  • 104. img sprite a.png b.png c.png spritehogehoge.png なんか出来てる!Sunday, 24 February 13
  • 105. Sunday, 24 February 13
  • 106. 早速使ってみよう!Sunday, 24 February 13
  • 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. CodeKitSunday, 24 February 13
  • 114. 黒い画面、怖いですよね?Sunday, 24 February 13
  • 115. CodeKitならSunday, 24 February 13
  • 116. Sunday, 24 February 13
  • 117. ドラッグアンドドロップ CodeKit に D&D するだけSunday, 24 February 13
  • 118. 新規にCompassプロジェクトを作成するSunday, 24 February 13
  • 119. 既存のプロジェクトでCompassを利用するSunday, 24 February 13
  • 120. Compass をインストールするSunday, 24 February 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 BourbonSunday, 24 February 13
  • 125. ありがとうございました! 大竹孔明Sunday, 24 February 13