Sass/Compass よくあるトラブルと 解決方法?回避方法
?
42 likes?27,076 views
CSS Nite LP32 Sass で行なった「Sass/Compass よくあるトラブルと 解決方法?回避方法」のスライドです
![おまじない
# キャッシュバスター文字列をトリミング
on_sprite_saved do |filename|
if File.exists?(filename)
FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}.png$}, '.png')
end
end
?
on_stylesheet_saved do |filename|
if File.exists?(filename)
css = File.read filename
File.open(filename, 'w+') do |f|
f << css.gsub(%r{-s[a-z0-9]{10}.png}, '.png')
end
end
end
con?g.rb に以下を追記
出典: http://stackover?ow.com/questions/9183133/how-to-turn-off-compass-sass-cache-busting/9332472](https://image.slidesharecdn.com/cssnitelp32-s6-maboroshi-140507205956-phpapp01/85/Sass-Compass-52-320.jpg)
Sass/Compass よくあるトラブルと 解決方法?回避方法
- 6. 本日の内容 ? 导入の障害を乗り越える方法 ? Sass/Compass の御法度 ? かゆいところに手を届ける罢颈辫蝉 ?「次」へのステップ
- 9. 受託で使ってもいいの？
- 10. いいんです！
- 12. いくつかの方法 A. 調整用のCSSファイルを? 別途用意する B. コンパイル後のCSSファイルを? 直接さわってもらう C. 顽张って使ってもらう！
- 13. いくつかの方法 A. 調整用のCSSファイルを? 別途用意する B. コンパイル後のCSSファイルを? 直接さわってもらう C. 顽张って使ってもらう！
- 14. 調整用CSSを用意する <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> ? <link rel="stylesheet" href="main.css"><!-- コンパイル後のCSSは編集禁止 --> <link rel="stylesheet" href="temp.css"><!-- スタイル調整はこちらを編集 --> ? </head> <body> <!-- 中略 --> </body> </html> コンパイル後のCSSファイルとは別に 調整用のCSSファイルを用意する
- 17. いくつかの方法 A. 調整用のCSSファイルを? 別途用意する B. コンパイル後のCSSファイルを? 直接さわってもらう C. 顽张って使ってもらう！
- 18. 直接さわってもらう コンパイル後のCSSファイルを 直接編集してもらう $ sass foo.scss:foo.css --style expanded sass コマンドでオプションを指定 /* 人間が読みやすい形式に出力される */ body { color: #333; } ? h1 { font-size: 2.0rem; } ? .red { color: #f00; } コンパイル後のCSSファイル # コメントのスタイルを"expanded"に指定 output_style = expanded Compass を使う場合は con?g.rb で
- 23. 原则として纳品する
- 24. 文字コードが 非UTF-8
- 25. 文字コードを宣言する @charset "Shift_JIS"; ? /* 日本語で何かしらコメント */ ? @import "compass"; // …以下略 ?@charset で文字コードを宣言 ?日本語でコメントを残す ? 指定の文字コードで保存してコンパイル SCSSファイル
- 27. 導入できた！ 万歳…?!
- 28. ネストの多用
- 29. ネストが深すぎると… #foo { width: 200px; ul { padding: 10px; li { list-style-type: none; a { color: #009; .bar { font-weight: bold; } } } } } SCSSファイル #foo { width: 200px; } #foo ul { padding: 10px; } #foo ul li { list-style-type: none; } #foo ul li a { color: #009; } #foo ul li a .bar { font-weight: bold; } コンパイル後のCSSファイル
- 30. これはひどい。
- 31. ネストは3阶层まで
- 32. extend の多用
- 33. extend しすぎると… %clearfix { &:after { content: ""; clear: both; display: block; } } .extended1 { @extend %clearfix; font-size: 120%; } .extended2 { @extend %clearfix; font-weight: bold; } .extended3 { @extend %clearfix; text-decoration: underline; } // 以下大量にextend SCSSファイル .extended1:after, .extended2:after, .e xtended3:after, .extended4:after, .ext ended5:after, .extended6:after, .exten ded7:after, .extended8:after, .extende d9:after, .extended10:after, .extended 11:after, .extended12:after, .extended 13:after, .extended14:after, .extended 15:after, .extended16:after, .extended 17:after, .extended18:after, .extended 19:after, .extended20:after { content: ""; clear: both; display: block; } ? .extended1 { font-size: 120%; } /* 以下略 */ コンパイル後のCSSファイル
- 34. これはひどい。
- 35. クラス や mixin にする .clearfix:after { content: ""; clear: both; display: block; } 汎用的なクラスにして @mixin clearfix { &:after { content: ""; clear: both; display: block; } } ! .foo { @include clearfix; } mixin にして使い回す <div class="clearfix"> <p class="main">Floated left.</p> <p class="sub">Floated right.</p> </div> html 側で使い回す
- 37. IEの 4,095 問題
- 38. ? IE9 以下では 4,095個までしか? セレクターを認識しない http://support.microsoft.com/kb/262161 ? ネストや extend を多用すると? セレクターが容易に増えていく ?Bless というツールで? CSSファイルを分割できる http://blesscss.com/
- 39. そもそも设计がまずい
- 40. 複雑な mixin の多用
- 41. 他人が理解できない
- 43. スプライト画像の? 肥大化
- 44. ?画像を使いすぎると? スプライト画像が肥大化する ? iPhone では 500万画素以上の? GIF/PNG/TIFF は表示できない ? Android は機種による
- 45. ? スプライト画像を分割するなど? 一枚に集めすぎない ? できるだけ画像を使わない ? アイコンはフォント化する手も
- 46. かゆいところに手を届ける罢颈辫蝉
- 48. 出力前 ディレクトリ構造 # css_dir と sass_dir を同じパスにする css_dir = "/" sass_dir = "/" con?g.rb CSS の配置場所に? SCSS を配置する root ┃┃ ┃ ┃ foo┣ foobar┣┃ style.scss┃┃ ┗ ┃ style.scss┗ bar┣ style.scss┗┃ index.html┣ config.rb┗
- 49. 出力後 ディレクトリ構造 # css_dir と sass_dir を同じパスにする css_dir = "/" sass_dir = "/" con?g.rb root foo┣ foobar┣┃ style.scss┃┃ ┣ ┃┃ style.css┗ ┃ style.scss┣ ┃ style.css┗ bar┣ style.scss┣┃ style.css┗┃ index.html┣ config.rb┗ SCSS と同じ所に? CSS が出力される
- 52. おまじない # キャッシュバスター文字列をトリミング on_sprite_saved do |filename| if File.exists?(filename) FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}.png$}, '.png') end end ? on_stylesheet_saved do |filename| if File.exists?(filename) css = File.read filename File.open(filename, 'w+') do |f| f << css.gsub(%r{-s[a-z0-9]{10}.png}, '.png') end end end con?g.rb に以下を追記 出典: http://stackover?ow.com/questions/9183133/how-to-turn-off-compass-sass-cache-busting/9332472
- 54. ? 最も重いのは? スプライト画像の生成 ? スプライト画像の生成には? chunky_png が使われている
- 55. chunky_png を使わない $ gem install oily_png ターミナルでインストール 出典: http://compass-style.org/help/tutorials/spriting/ ?oily_png を使う ? chunky_png よりも高速 ? インストールするだけで自動認識 ※Mac は先頭に sudo が必要
- 56. 「次」へのステップ
- 57. レスポンシブな? フレームワーク
- 60. Sass で? BEM
- 61. BEM とは ? Yandex が開発した設計の方法論 ? CSS用に落とし込んだ? MindBEMding が使いやすい ?Block, Element, Modi?er? の略
- 63. CSSだとつらい .block { width: 100%; } ? .block__element { float: left; width: 50%; } ? .block__element--modifier { float: right; } ? .block--modifier { padding: 20px; } ? .block--modifier__element { color: #f00; } CSS BEMのルールに従うと? クラス名が長く? 繰り返しも多くなる
- 64. Sass を使えば… .block { width: 100%; ? @at-root { ? #{&}__element { float: left; width: 50%; } #{&}__element--modifier { float: right; } #{&}--modifier { padding: 20px; } #{&}--modifier__element { color: #f00; } ? } } SCSS @at-root と? #{&} で? サクサク書ける
- 66. Sass や Compass の? バージョン管理
- 67. 例えばこんなとき ?次期バージョンの? Sass/Compass を使いたい ? 使用する Sass/Compass の? バージョンを厳格に指定したい
- 69. Bundler のインストール $ gem install bundler ターミナルでインストール ※Mac は先頭に sudo が必要
- 70. プロジェクトごとの初期設定 $ bundle init ターミナルで作業ディレクトリを開いて ※作業ディレクトリまでのパスにスペースが含まれていると正常に動作しない場合があるので要注意 $ vi Gemfile 作業ディレクトリに Gem?le が生成されるので編集する ※一般的なテキストエディタでも編集可能 source "https://rubygems.org" ! gem 'sass', '3.3.0.rc.2' gem 'compass', '0.13.alpha.12' Gem?le 記述例 ※“Sass Ver.3.3.0.rc.2” と “Compass Ver.0.13.alpha.12” を使用したい場合は上記のように記述
- 71. パッケージのインストール $ bundle install --path vendor/bundle ターミナルでインストール ※パスを指定せずに実行するとグローバルにインストールされてしまうので要注意 ? Gem?le をプロジェクトメンバー間で? 共有すれば、全員が同じバージョンの? Sass や Compass を使用できる
- 72. 各コマンドの使用方法 $ bundle exec compass w bundle コマンドを通じて呼び出す ? あとはいつも通り
- 73. Grunt でもっと便利に
- 77. Node.js のインストール ? 公式サイトから? インストーラーをダウンロード ? Macなら? Homebrew か nodebrew での インストールがおすすめ ? Homebrew: http://brew.sh/ ? nodebrew: https://github.com/hokaccha/nodebrew
- 78. Grunt でできること ? ファイル更新の監視 ? ブラウザのライブリロード ? Sass/Compass のコンパイル ?ベンダープレフィックスの付与 ?CSSスプライトの生成 ? CSSのミニファイ ? 画像の最適化?
- 79. Compass より柔軟
- 80. プラグインを组み合わせる
- 81. ファイル更新の監視 ? grunt-contrib-watch https://github.com/gruntjs/grunt-contrib-watch ? 骋谤耻苍迟公式プラグイン ? grunt-este-watch https://github.com/steida/grunt-este-watch ? grunt-contrib-watch よりも高速
- 82. ブラウザのライブリロード ? grunt-contrib-connect https://github.com/gruntjs/grunt-contrib- connect ? 骋谤耻苍迟公式プラグイン ? 前のページのプラグインと組み合わせることで? ファイル更新時にブラウザをリロードしてくれる
- 83. Sass のコンパイル ? grunt-contrib-sass https://github.com/gruntjs/grunt-contrib-sass ? 骋谤耻苍迟公式プラグイン ? grunt-sass https://github.com/sindresorhus/grunt-sass ? grunt-contrib-sass よりも高速
- 84. Compass のコンパイル ? grunt-contrib-compass https://github.com/gruntjs/grunt-contrib- compass ? 骋谤耻苍迟公式プラグイン
- 85. ベンダープレフィックスの付与 ? grunt-autopre?xer https://github.com/nDmitry/grunt-autopre?xer ? 標準のCSSプロパティさえ書けば? 自動的にベンダープレフィックスを付与してくれる ? 付与するベンダープレフィックスを? ブラウザバージョンで指定することができる ? Compass の CSS3 ヘルパーが不要になる
- 86. CSSスプライトの生成 ? grunt-spritesmith https://github.com/Ensighten/grunt-spritesmith ? 画像処理エンジンが別途必要 ? 出力フォーマットを SCSS にすると? スプライト用の Mixin を生成してくれる ? Compass のスプライトヘルパーが不要になる
- 87. CSS のミニファイ ? grunt-contrib-cssmin https://github.com/gruntjs/grunt-contrib-cssmin ? 骋谤耻苍迟公式プラグイン ? grunt-csso https://github.com/t32k/grunt-csso ? grunt-contrib-cssmin よりも圧縮率が高い
- 88. 画像の最適化 ? grunt-contrib-imagemin https://github.com/gruntjs/grunt-contrib- imagemin ? 骋谤耻苍迟公式プラグイン ? PNG, JPEG, GIF に対応
- 91. まとめ
- 92. ご利用は计画的に
- 93. 身の丈に? 合わせて
- 94. 黒い画面、今度こそ
- 96. 大丈夫、まぼろし监修だよ！
- 98. Photo credits ? Philippe Moreau Chevrolet ? Eric_Dorsey ? niXerKG ? leigh wolf ? Corey Templeton ? asenat29 ? Nicu Buculei ? Lachlan Fearnley ? marsmettn tallahassee ? Becky Stern ? myrrh ahn ? <p&p> ? Will Scullin ? Van Corey ? Kate Sumbler ? Li Jen Jian ? Andy Ciordia ? Mrs TeePot ? Judy Baxter ? Yamanaka Tamaki ? Joseph Kesisoglou ? Emyan ? ecatoncheires ? clogette ? KIMURA Tetsuro