Download as PDF, PPTX
![おまじない
# キャッシュバスター文字列をトリミング
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
config.rb に以下を追記
出典: http://stackoverflow.com/questions/9183133/how-to-turn-off-compass-sass-cache-busting/9332472](https://image.slidesharecdn.com/cssnitelp32-s6-maboroshi-140507205956-phpapp01/75/Sass-Compass-52-2048.jpg)
Uploaded byMaboroshi.inc
Sass/Compass よくあるトラブルと 解決方法・回避方法
CSS Nite LP32 Sass で行なった「Sass/Compass よくあるトラブルと 解決方法・回避方法」のスライドです
Sass/Compass よくあるトラブルと 解決方法・回避方法
- 2.
- 3.
- 4.
- 5.
- 6. 本日の内容 • 導入の障害を乗り越える方法 • Sass/Compassの御法度 • かゆいところに手を届けるTips •「次」へのステップ
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14. 調整用CSSを用意する <!DOCTYPE html> <html lang="ja"> <head> <metacharset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"><!-- コンパイル後のCSSは編集禁止 --> <link rel="stylesheet" href="temp.css"><!-- スタイル調整はこちらを編集 --> </head> <body> <!-- 中略 --> </body> </html> コンパイル後のCSSファイルとは別に 調整用のCSSファイルを用意する
- 15.
- 16.
- 17.
- 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 を使う場合は config.rb で
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25. 文字コードを宣言する @charset "Shift_JIS"; /* 日本語で何かしらコメント*/ @import "compass"; // …以下略 •@charset で文字コードを宣言 •日本語でコメントを残す • 指定の文字コードで保存してコンパイル SCSSファイル
- 26.
- 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.
- 32.
- 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 側で使い回す
- 36.
- 37.
- 38. • IE9 以下では4,095個までしか セレクターを認識しない http://support.microsoft.com/kb/262161 • ネストや extend を多用すると セレクターが容易に増えていく •Bless というツールで CSSファイルを分割できる http://blesscss.com/
- 39.
- 40.
- 41.
- 42.
- 43.
- 44. •画像を使いすぎると スプライト画像が肥大化する • iPhone では500万画素以上の GIF/PNG/TIFF は表示できない • Android は機種による
- 45. • スプライト画像を分割するなど 一枚に集めすぎない • できるだけ画像を使わない •アイコンはフォント化する手も
- 46.
- 47.
- 48. 出力前 ディレクトリ構造 # css_dir とsass_dir を同じパスにする css_dir = "/" sass_dir = "/" config.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 = "/" config.rb root foo┣ foobar┣┃ style.scss┃┃ ┣ ┃┃ style.css┗ ┃ style.scss┣ ┃ style.css┗ bar┣ style.scss┣┃ style.css┗┃ index.html┣ config.rb┗ SCSS と同じ所に CSS が出力される
- 50.
- 51.
- 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 config.rb に以下を追記 出典: http://stackoverflow.com/questions/9183133/how-to-turn-off-compass-sass-cache-busting/9332472
- 53.
- 54.
- 55. chunky_png を使わない $ geminstall oily_png ターミナルでインストール 出典: http://compass-style.org/help/tutorials/spriting/ •oily_png を使う • chunky_png よりも高速 • インストールするだけで自動認識 ※Mac は先頭に sudo が必要
- 56.
- 57.
- 58.
- 59.
- 60.
- 61. BEM とは • Yandexが開発した設計の方法論 • CSS用に落とし込んだ MindBEMding が使いやすい •Block, Element, Modifier の略
- 62.
- 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 と #{&} で サクサク書ける
- 65.
- 66. Sass や Compassの バージョン管理
- 67. 例えばこんなとき •次期バージョンの Sass/Compass を使いたい • 使用するSass/Compass の バージョンを厳格に指定したい
- 68.
- 69. Bundler のインストール $ geminstall bundler ターミナルでインストール ※Mac は先頭に sudo が必要
- 70. プロジェクトごとの初期設定 $ bundle init ターミナルで作業ディレクトリを開いて ※作業ディレクトリまでのパスにスペースが含まれていると正常に動作しない場合があるので要注意 $vi Gemfile 作業ディレクトリに Gemfile が生成されるので編集する ※一般的なテキストエディタでも編集可能 source "https://rubygems.org" ! gem 'sass', '3.3.0.rc.2' gem 'compass', '0.13.alpha.12' Gemfile 記述例 ※“Sass Ver.3.3.0.rc.2” と “Compass Ver.0.13.alpha.12” を使用したい場合は上記のように記述
- 71. パッケージのインストール $ bundle install--path vendor/bundle ターミナルでインストール ※パスを指定せずに実行するとグローバルにインストールされてしまうので要注意 • Gemfile をプロジェクトメンバー間で 共有すれば、全員が同じバージョンの Sass や Compass を使用できる
- 72. 各コマンドの使用方法 $ bundle execcompass w bundle コマンドを通じて呼び出す • あとはいつも通り
- 73.
- 74.
- 75.
- 76.
- 77. Node.js のインストール • 公式サイトから インストーラーをダウンロード •Macなら Homebrew か nodebrew での インストールがおすすめ • Homebrew: http://brew.sh/ • nodebrew: https://github.com/hokaccha/nodebrew
- 78. Grunt でできること • ファイル更新の監視 •ブラウザのライブリロード • Sass/Compass のコンパイル •ベンダープレフィックスの付与 •CSSスプライトの生成 • CSSのミニファイ • 画像の最適化
- 79.
- 80.
- 81. ファイル更新の監視 • grunt-contrib-watch https://github.com/gruntjs/grunt-contrib-watch • Grunt公式プラグイン •grunt-este-watch https://github.com/steida/grunt-este-watch • grunt-contrib-watch よりも高速
- 82. ブラウザのライブリロード • grunt-contrib-connect https://github.com/gruntjs/grunt-contrib- connect • Grunt公式プラグイン •前のページのプラグインと組み合わせることで ファイル更新時にブラウザをリロードしてくれる
- 83. Sass のコンパイル • grunt-contrib-sass https://github.com/gruntjs/grunt-contrib-sass •Grunt公式プラグイン • grunt-sass https://github.com/sindresorhus/grunt-sass • grunt-contrib-sass よりも高速
- 84.
- 85. ベンダープレフィックスの付与 • grunt-autoprefixer https://github.com/nDmitry/grunt-autoprefixer • 標準の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公式プラグイン • grunt-csso https://github.com/t32k/grunt-csso • grunt-contrib-cssmin よりも圧縮率が高い
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98. Photo credits • PhilippeMoreau 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
- 99.