Compassで書き出すCSSファイルを軽量化する

Compassは便利な半面、書き出されるCSSのサイズが非常に大きくなってしまうことがあります。設定を変更することで書き出されるCSSファイルの容量を削減することが可能です。

Step1.圧縮する

コンパイル時に圧縮オプションを指定することで改行や空白を取り除いた形で書き出してくれます。config.rbに以下のコードを追加するだけで圧縮してくれます。

output_style = :compressed

Step2.無駄なベンダープリフィックスを取り除く(ブラウザ別)

CompassのCSS3ミックスインは便利な反面過剰なベンダープリフィックスをつけます。

Sassファイルの冒頭に以下のようなコードを追加することで「-o-」や「-ms-」、「-moz-」といったベンダープリフィックス付のプロパティが書き出されなくなります。Operaは現在はWebKitベースになっており「-o-」は化石ですので取り除いてもほとんど問題ないでしょう。

$experimental-support-for-opera: false;
$experimental-support-for-mozilla: false;
$experimental-support-for-microsoft: false;

Step3.無駄なベンダープリフィックスを取り除く(プロパティ別)

Firefoxなどに対応する場合、box-sizingなど一部ベンダープリフィックス付きのプロパティがある為に上記のように「-moz-」を取り除けないケースがあります。そういった場合はプロパティ別にベンダープリフィックスの有無を指定しましょう。

例えばbox-shadowは以下のようにCSS3ミックスインを上書きすることでオフィシャルのCSS3プロパティのみが書き出されるようになります。不要なベンダープリフィックスの前に「not」を追加します。

@mixin box-shadow($bs) {
	$bs: unquote($bs);
	@include experimental(box-shadow, $bs,not -moz,not -webkit, not -o, not -ms, not -khtml, official); }

オフィシャルのCSS3プロパティのみを書きだす場合はCSS3ミックスインを使わずに記述しても良いですが、案件後半で謎の対応ブラウザが登場することもよくありますので、CSS3ミックスインで制御したほうが安全です。

以下のように指定すると「-webkit-」付きとオフィシャルのプロパティのみが書き出されます。

@mixin background-size($bs) {
	$bs: unquote($bs);
	@include experimental(background-size, $bs,not -moz,-webkit, not -o, not -ms, not -khtml, official); }

グラデーションなどは以下のようにbackground()を上書きすると、「-moz-」付きのプロパティが書き出されなくなります。

@mixin background($background-1, $background-2: false, $background-3: false, $background-4: false, $background-5: false, $background-6: false, $background-7: false, $background-8: false, $background-9: false, $background-10: false) {
	$backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5, $background-6, $background-7, $background-8, $background-9, $background-10);
	$mult-bgs: -compass-list-size($backgrounds) > 1;
	$add-pie-bg: prefixed(-pie, $backgrounds) or $mult-bgs;
	@if $experimental-support-for-svg and prefixed(-svg, $backgrounds) {
		background: -svg($backgrounds); }
	@if $support-for-original-webkit-gradients and prefixed(-owg, $backgrounds) {
		background: -owg($backgrounds); }
	@if $experimental-support-for-webkit and prefixed(-webkit, $backgrounds) {
		background: -webkit($backgrounds); }
	//@if $experimental-support-for-mozilla and prefixed(-moz, $backgrounds) {
	//background: -moz($backgrounds); }
	@if $experimental-support-for-opera and prefixed(-o, $backgrounds) {
		background: -o($backgrounds); }
	@if $experimental-support-for-pie and $add-pie-bg {
		-pie-background: -pie($backgrounds); }
	background: $backgrounds;
}

MDNなどを確認しながら、不要なベンダープリフィックス付きプロパティを書き出さないようにすることでCompassで書き出されるCSSファイルを軽量化することができます。

関連エントリー

Source MapでSass/Compassを簡単にCSSをデバッグする
Sass/Compassで保存した際に非圧縮と圧縮したCSSファイルを出力する
Google ChromeでCSSがSassの何行目に記述されているか確認する方法
CompassでデータURI スキーム
CompassでCSSスプライト

スポンサードリンク

«[書評]WebクリエイターのためのCreateJSスタイルブック | メイン | メディアクエリをまとめるGruntタスク「grunt-combine-media-queries」»