Sass/Compass よくあるトラブルと解決方法・回避方法

良くあるトラブルと 
解決方法・回避方法
木村哲朗・西畑一馬
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. 頑張って使ってもらう！

調整用CSSを用意する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="temp.css">

</head>
<body>

</body>
</html>
コンパイル後のCSSファイルとは別に
調整用のCSSファイルを用意する

メリット
• コンパイル後のCSSファイルが 
汚染されない
•差分の吸収がし易い

デメリット
• HTTPリクエストが増える
• スタイルの上書きが大変

直接さわってもらう
コンパイル後の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 で

メリット
• スタイルを上書きし易い

デメリット
• コンパイル後のCSSファイルが 
汚染される

いずれにせよ 
ディレクションのお話

SCSSファイルって 
納品するの？

文字コードを宣言する
@charset "Shift_JIS";

/* 日本語で何かしらコメント */

@import "compass";
// …以下略
•@charset で文字コードを宣言
•日本語でコメントを残す
• 指定の文字コードで保存してコンパイル
SCSSファイル

導入できた！万歳…?!

ネストが深すぎると…
#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;
}

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
19:after, .extended20:after {
content: "";
clear: both;
display: block;
}

.extended1 {
font-size: 120%;
}
/* 以下略 */

クラスや 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/

• IE9 以下では 4,095個までしか 
セレクターを認識しない
http://support.microsoft.com/kb/262161
• ネストや extend を多用すると 
セレクターが容易に増えていく
•Bless というツールで 
CSSファイルを分割できる
http://blesscss.com/

そもそも設計がまずい

• メンバーを思いやる
• 使用方法をコメントに記す
•関数についても同じ

スプライト画像の 
肥大化

•画像を使いすぎると 
スプライト画像が肥大化する
• iPhone では 500万画素以上の 
GIF/PNG/TIFF は表示できない
• Android は機種による

• スプライト画像を分割するなど 
一枚に集めすぎない
• できるだけ画像を使わない
• アイコンはフォント化する手も

かゆいところに手を届けるTips

CompassでCSSを 
複数のディレクトリに 
分けて書き出したい

出力前
ディレクトリ構造
# 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┗

出力後
ディレクトリ構造
# 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 が出力される

スプライト画像の 
ファイル名を綺麗に 
したい

• 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

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

Foundation
http://foundation.zurb.com/

BEM とは
• Yandex が開発した設計の方法論
• CSS用に落とし込んだ 
MindBEMding が使いやすい
•Block, Element, Modiﬁer 
の略

詳しくはこちら
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-modiﬁer
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
作業ディレクトリに 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” を使用したい場合は上記のように記述

パッケージのインストール
$ bundle install --path vendor/bundle
※パスを指定せずに実行するとグローバルにインストールされてしまうので要注意
• Gemﬁle をプロジェクトメンバー間で 
共有すれば、全員が同じバージョンの 
Sass や Compass を使用できる

各コマンドの使用方法
$ bundle exec compass w
bundle コマンドを通じて呼び出す
• あとはいつも通り

Grunt とは
•タスクランナー 
さまざまな処理を順番に自動実行
•Node.js で動作する

Node.js のインストール
• 公式サイトから 
インストーラーをダウンロード
• Macなら 
Homebrew か nodebrew での
インストールがおすすめ
• Homebrew: http://brew.sh/
• nodebrew: https://github.com/hokaccha/nodebrew

Grunt でできること
• ファイル更新の監視
• ブラウザのライブリロード
• Sass/Compass のコンパイル
•ベンダープレフィックスの付与
•CSSスプライトの生成
• CSSのミニファイ
• 画像の最適化

プラグインを組み合わせる

ファイル更新の監視
• 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
• 前のページのプラグインと組み合わせることで 
ファイル更新時にブラウザをリロードしてくれる

Sass のコンパイル
• grunt-contrib-sass
https://github.com/gruntjs/grunt-contrib-sass
• grunt-sass
https://github.com/sindresorhus/grunt-sass
• grunt-contrib-sass よりも高速

Compass のコンパイル
• grunt-contrib-compass
compass

ベンダープレフィックスの付与
• grunt-autopreﬁxer
https://github.com/nDmitry/grunt-autopreﬁxer
• 標準の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-csso
https://github.com/t32k/grunt-csso
• grunt-contrib-cssmin よりも圧縮率が高い

画像の最適化
• grunt-contrib-imagemin
imagemin
• PNG, JPEG, GIF に対応

Grunt の始め方
http://blog.webcreativepark.net/2013/08/28-010250.html

Gulp ってのもあります
http://gulpjs.com/

赤い 画面
ターミナルが 
好きになりました♥

大丈夫、まぼろし監修だよ！

大丈夫、まぼろし監修だよ！
お申し込みは→ 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

ありがとうございます
木村哲朗・西畑一馬

Sass/Compass よくあるトラブルと解決方法・回避方法

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Sass/Compass よくあるトラブルと解決方法・回避方法

Similaire à Sass/Compass よくあるトラブルと解決方法・回避方法 (20)

Dernier

Dernier (9)