Sass,LESS,StylusのColor functionsのコンパイル結果を比べてみた

2012-11-28

Sass、LESS、StylusといったCSSプリプロセッサには、色を扱うビルトインファンクションがある。

それらの機能はプリプロセッサごとにさまざまだが、共通して存在するファンクションの一つとして、lighten(color,percentage)、darken(color,percentage)といった引数に指定した色を明るく/暗くするというのがある。

明るく/暗く、といっても単純に明度を操作するのか、色々とごにょごにょしているのかは分からないが、とりあえず同じ書き方をするなら同じ値を返すだろう、という期待をしたくなるが、実際のところどうだろうか。

ところでこれらの使い所はある？

結論からいうと、実務では色系のファンクションなかなかお世話になることはない。というのも現状Photoshopのデザインカンプを元に、そのカンプ上の色を抽出して、文字色や背景色とする。

ただHTMLのプロトタイプ先行での開発や、色に関して一定のルールや計算・設計をしている場合には、プリプロセッサの持つ色系ファンクションの機能を活用できるかもしれない。

非常に簡易的な例であげると、ボタンのように少し立体的に魅せるためのグラデーション表現などに、darken(color,percentage)は使える。

button {
	background-image: -webkit-linear-gradient(top,#EFEFEF,darken(#EFEFEF,30%));
}

このように、メインカラー（明るい方のカラー）の色に対し、darkenを使って暗い色をつくるようにすれば、グラデーションをつくることができる。結果は下記。（例はSass）

button {
  background-image: -webkit-linear-gradient(top, #efefef, #a3a3a3);
}

では本題ということで、例にもつかったdarkenをSass,LESS,Stylusそれぞれで使ってみる。ドキュメントを簡単に見る限りでは同じ効果を出すものに見えるが、結果はどうだろうか。

基本色、darkenのパーセンテージをまったく一緒にして比べてみる。

p {
  $textColor: #FF9933;
  color: darken($textColor,30%);
}

コンパイル結果：

p {
  color: #994c00;
}

p {
  textColor: #FF9933;
  color: darken(@textColor,30%);
}

コンパイル結果：

p {
  color: #994d00;
}

p {
  textColor = #FF9933;
  color: darken(textColor,30%);
}

コンパイル結果：

p {
  color: #d66b00;
}

特に理由なく、#FF9933という色を選んでみた結果では、Stylusだけ大幅に異なる。ちなみに元の色を#DDDDDDとしてみると、その違いの幅は小さい。

今回はdarkenの仕様を調べたわけではないので、この理由については今回説明しないが、気をつけるべきことは、これらのファンクションを使っていて、他のプリプロセッサに乗り換える場合だ。

同じようなファンクションだからといって、そのまま持ち込むと、このようにコンパイルしたあとCSSの値が変わることがあるということ。

これらプリプロセッサの内部仕様をあまりちゃんと読む機会がなかったので、これを機にみてみると面白いかもしれない。今回とりあげたファンクションについては、次のリンク先を参照してほしい。