2013-06-11

Sassの--precisionオプション

3.2以降のSassでは計算結果が少数になる場合、小数点以下5桁まで出すようになっている(それまでは3桁)。そこで--precisionオプションで小数部分の桁を制限してやることにより、ここくらいのコンパクトなCSSファイルでも0.5KB程度は節約できる。

0.5KBと言われるとやるだけ無駄感があるけど、規模が大きくなれば節約できるサイズはそれなりに増えるし、デメリットはあまりないのでやらないよりはやった方が良いような気がする。

3桁に制限したい場合は--precisionオプションで3を指定する。

$ sass --watch style.scss:style.css --precision 3

最後の桁は四捨五入される。3桁より下にもできるけど、3桁残すことにするとem単位でも1/100の詳細度が四捨五入されても正確になるので、最低でも3桁は残した方が無難。

ブラウザーごとに小数点の丸め方というか、丸めてからpx単位に反映させるかpx単位に反映させてから丸めるかとかの違いのような何かが多分あってまぁまぁずれるのは頭に入れておいた方が良さそう。em単位や%、特にem単位では整数部分の桁が少ないこともあってなかなか影響する。桁を減らすデメリットは主にこれで、ピクセルパーフェクトを意識したCSSでは使うとまずいことになりやすい……けどそういうCSSの場合はそもそも計算に依存してないだろうと思うので、結局はあんまり気にせずガンガン使って良いはず。