最近は通信速度も向上して、CSSの大容量化による WEB ページ表示速度の低下も問題視されなくなってきたと思います。実際に、CSS をスリム化する程度で本格的に構造自体を毎案件ごと手を付ける方も少なくなったのではないでしょうか。 WordPress を使用している方は最適化されたサーバーというものも存在しています。ここであえて、ms (ミリセック) を狩る狩人方には Sass をお勧めしたいと思います。

不要なベンダープレフィックスを表示しない

この内容は、「Sassで使用するベンダープレフィックスだけを出力する – @ifを使う」にて紹介しています。処理の構造自体は、 @if と、 @each 、リスト変数を利用したものです。一つのプロパティに対して不要な記述を減らす場合は、この機能を流用すれば可能となります。汎用性は高いかと思いますので是非参考にしてみてください。

プロパティを表示しない

以下のソースを見てください。

@mixin mixinTest($value: null) {
    div.testclass {
        height: 200px;
        width: $value;
    }
}

@include mixinTest();

$value に null を指定しています。この null が今回の記事でのポイントとなります。出力結果である CSS は以下となります。

div.testclass {
  height: 200px; }

width が出力されていません。これは null を指定したためプロパティが生成されなかったためです。この機能を使えば、不要なプロパティ自体を記述させないようにすることができます。

クラス(セレクタ)を表示しない

もう一つ null には重要な機能があります。以下のソースを見てください。

@mixin mixinTest($value: null) {
    div.testclass1 {
        width: 500px;
    }

    div.testclass2 {
        width: $value;
    }
}

@include mixinTest();

上記コードの出力結果です。

div.testclass1 {
  height: 200px; }

testclass2がありませんね。これは書き間違いではありません。全てのプロパティが null であった場合は中身が存在しないため class (セレクタ)自体生成されないのです。例えば、以下のようなこともできます。

$value: null !default;
@mixin mixinTest() {
    div.testclass {
        @content;

        width: $value;
        $value: null;
    }
}


@include mixinTest(); // 生成されない
@include mixinTest { $value: 999px; }
@include mixinTest(); // 生成されない
@include mixinTest { $value: 111px; }

そして出力されるコードは以下となります。

div.testclass {
  width: 999px; }

div.testclass {
  width: 111px; }

testclass が2つ出力されているのは気にしないでください。注目して欲しいところは、 @content で展開するコード内に、 $value を定義していなければ testclass が生成されないことです。

@content を使わずとも同様の処理を作ることはできますが、どうせなので @content を使ってみました。 @content については「Sassの@contentの使い道とは？ – @contentの実験と結果」にて紹介しています。

不要な CSS を出力しないように Sass の記述に気を配ることで、自動でほぼ最適な CSS を吐き出すようにすることができます。毎プロジェクトごとに CSS を追っかける必要はありません。是非参考にしてみてください。