Post on 25-May-2015
description
良くあるトラブルと解決方法・回避方法
木村哲朗・西畑一馬
Sass / Compass
木村 哲朗 フロントエンドエンジニア
西畑 一馬 フロントエンドエンジニア
こちらもどうぞ
http://www.slideshare.net/maboroshi_inc/css-nite-lp26-codekitweb
スライド： 動画：http://vimeo.com/57782498
本日の内容
•導入の障害を乗り越える方法
•Sass/Compass の御法度
•かゆいところに手を届けるTips •「次」へのステップ
前置き
フロントエンドの受託制作やってます。
導入の障害を乗り越える方法
受託で使ってもいいの？
いいんです！
クライアントがSassを使えない
いくつかの方法
A. 調整用のCSSファイルを別途用意する
B. コンパイル後のCSSファイルを直接さわってもらう
C. 頑張って使ってもらう！
いくつかの方法
A. 調整用のCSSファイルを別途用意する
B. コンパイル後のCSSファイルを直接さわってもらう
C. 頑張って使ってもらう！
調整用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ファイルを用意する
メリット
•コンパイル後のCSSファイルが汚染されない
•差分の吸収がし易い
デメリット
•HTTPリクエストが増える
•スタイルの上書きが大変
いくつかの方法
A. 調整用のCSSファイルを別途用意する
B. コンパイル後のCSSファイルを直接さわってもらう
C. 頑張って使ってもらう！
直接さわってもらう
コンパイル後の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 で
メリット
•スタイルを上書きし易い
デメリット
•コンパイル後のCSSファイルが汚染される
いずれにせよディレクションのお話
SCSSファイルって納品するの？
原則として納品する
文字コードが 非UTF-8
文字コードを宣言する@charset "Shift_JIS"; /* 日本語で何かしらコメント */ @import "compass"; // …以下略
•@charset で文字コードを宣言 •日本語でコメントを残す
•指定の文字コードで保存してコンパイル
SCSSファイル
Sass/Compass の御法度
導入できた！ 万歳…?!
ネストの多用
ネストが深すぎると…#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ファイル
これはひどい。
ネストは3階層まで
extend の多用
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, .extended3:after, .extended4:after, .extended5:after, .extended6:after, .extended7:after, .extended8:after, .extended9:after, .extended10:after, .extended11:after, .extended12:after, .extended13:after, .extended14:after, .extended15:after, .extended16:after, .extended17:after, .extended18:after, .extended19:after, .extended20:after { content: ""; clear: both; display: block; } .extended1 { font-size: 120%; } /* 以下略 */
コンパイル後のCSSファイル
これはひどい。
クラス や 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 側で使い回す
ちなみに
•@media の中では@extend が使えない
http://terkel.jp/archives/2012/07/at-media-and-at-extend/
IEの 4,095 問題
• IE9 以下では 4,095個までしかセレクターを認識しない http://support.microsoft.com/kb/262161
• ネストや extend を多用するとセレクターが容易に増えていく •Bless というツールでCSSファイルを分割できる http://blesscss.com/
そもそも設計がまずい
複雑な mixin の多用
他人が理解できない
• メンバーを思いやる •使用方法をコメントに記す •関数についても同じ
スプライト画像の肥大化
•画像を使いすぎるとスプライト画像が肥大化する
• iPhone では 500万画素以上のGIF/PNG/TIFF は表示できない
• Android は機種による
• スプライト画像を分割するなど一枚に集めすぎない
•できるだけ画像を使わない
•アイコンはフォント化する手も
かゆいところに手を届けるTips
CompassでCSSを 複数のディレクトリに分けて書き出したい
出力前ディレクトリ構造
# 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┗
出力後ディレクトリ構造
# css_dir と sass_dir を同じパスにする css_dir = "/" sass_dir = "/"
config.rb
rootfoo┣
foobar┣┃style.scss┃┃ ┣
┃┃ style.css┗┃ style.scss┣┃ style.css┗
bar┣style.scss┣┃style.css┗┃
index.html┣config.rb┗
SCSS と同じ所にCSS が出力される
スプライト画像のファイル名を綺麗にしたい
• 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
config.rb に以下を追記
出典: http://stackoverflow.com/questions/9183133/how-to-turn-off-compass-sass-cache-busting/9332472
Compassの コンパイルを早くしたい
• 最も重いのはスプライト画像の生成
•スプライト画像の生成にはchunky_png が使われている
chunky_png を使わない$ gem install oily_png
ターミナルでインストール
出典: http://compass-style.org/help/tutorials/spriting/
•oily_png を使う • chunky_png よりも高速
•インストールするだけで自動認識
※Mac は先頭に sudo が必要
「次」へのステップ
レスポンシブなフレームワーク
Bootstrap
http://getbootstrap.com/ Sass版： https://github.com/twbs/bootstrap-sass
Sass でBEM
BEM とは
•Yandex が開発した設計の方法論
• CSS用に落とし込んだMindBEMding が使いやすい
•Block, Element, Modifierの略
詳しくはこちらhttp://bem.info/method/
http://journal.sooey.com/220
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
https://gist.github.com/juno/6182957
http://blog.ruedap.com/2013/10/29/block-element-modifier
http://hail2u.net/blog/webdesign/sass-and-bem.html
http://www.adventar.org/calendars/61
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のルールに従うとクラス名が長く
繰り返しも多くなる
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 と#{&} でサクサク書ける
まだ使えない次期バージョン 3.3 から
Sass や Compass のバージョン管理
例えばこんなとき
•次期バージョンのSass/Compass を使いたい
•使用する Sass/Compass の バージョンを厳格に指定したい
Bundler のインストール$ gem install bundler
ターミナルでインストール
※Mac は先頭に sudo が必要
プロジェクトごとの初期設定$ 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” を使用したい場合は上記のように記述
パッケージのインストール$ bundle install --path vendor/bundle
ターミナルでインストール
※パスを指定せずに実行するとグローバルにインストールされてしまうので要注意
• Gemfile をプロジェクトメンバー間で共有すれば、全員が同じバージョンのSass や Compass を使用できる
各コマンドの使用方法$ bundle exec compass w
bundle コマンドを通じて呼び出す
• あとはいつも通り
Grunt でもっと便利に
Grunt とは
•タスクランナーさまざまな処理を順番に自動実行
•Node.js で動作する
Node.js のインストール•公式サイトからインストーラーをダウンロード
•Macなら Homebrew か nodebrew でのインストールがおすすめ • Homebrew: http://brew.sh/
• nodebrew: https://github.com/hokaccha/nodebrew
Grunt でできること•ファイル更新の監視 •ブラウザのライブリロード • Sass/Compass のコンパイル •ベンダープレフィックスの付与 •CSSスプライトの生成 • CSSのミニファイ •画像の最適化
Compass より柔軟
プラグインを組み合わせる
ファイル更新の監視•grunt-contrib-watch https://github.com/gruntjs/grunt-contrib-watch • Grunt公式プラグイン
• grunt-este-watch https://github.com/steida/grunt-este-watch • grunt-contrib-watch よりも高速
ブラウザのライブリロード•grunt-contrib-connect https://github.com/gruntjs/grunt-contrib-connect • Grunt公式プラグイン •前のページのプラグインと組み合わせることでファイル更新時にブラウザをリロードしてくれる
Sass のコンパイル•grunt-contrib-sass https://github.com/gruntjs/grunt-contrib-sass • Grunt公式プラグイン
• grunt-sass https://github.com/sindresorhus/grunt-sass • grunt-contrib-sass よりも高速
Compass のコンパイル•grunt-contrib-compass https://github.com/gruntjs/grunt-contrib-compass • Grunt公式プラグイン
ベンダープレフィックスの付与•grunt-autoprefixer https://github.com/nDmitry/grunt-autoprefixer • 標準のCSSプロパティさえ書けば自動的にベンダープレフィックスを付与してくれる
•付与するベンダープレフィックスをブラウザバージョンで指定することができる
• Compass の CSS3 ヘルパーが不要になる
CSSスプライトの生成•grunt-spritesmith https://github.com/Ensighten/grunt-spritesmith • 画像処理エンジンが別途必要 •出力フォーマットを SCSS にするとスプライト用の Mixin を生成してくれる
• Compass のスプライトヘルパーが不要になる
CSS のミニファイ•grunt-contrib-cssmin https://github.com/gruntjs/grunt-contrib-cssmin • Grunt公式プラグイン
• grunt-csso https://github.com/t32k/grunt-csso • grunt-contrib-cssmin よりも圧縮率が高い
画像の最適化•grunt-contrib-imagemin https://github.com/gruntjs/grunt-contrib-imagemin • Grunt公式プラグイン • PNG, JPEG, GIF に対応
Grunt の始め方
http://blog.webcreativepark.net/2013/08/28-010250.html
まとめ
ご利用は計画的に
身の丈に合わせて
黒い画面、今度こそ
赤い画面
ターミナルが好きになりました♥
大丈夫、まぼろし監修だよ！
大丈夫、まぼろし監修だよ！
お申し込みは→ http://peatix.com/event/29230
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
ありがとうございます木村哲朗・西畑一馬