Sassの演算(除算)で得られる数値の小数点以下の桁数を増やす

Sassと言えば、演算。

と言い切るのはちょっと大げさですが、よく使う機能の1つだと思います。

以前、line-heightを除算を用いて演算させたところ、ブラウザ毎で解釈が違う事がありました。

どうやらブラウザ毎に小数点以下の認識する桁数が違うという事実にまで辿り着きました。

Unformed Building
CSS の小数点以下の数値を各ブラウザはどのように解釈するか

Google Chromeが小数点以下10桁まで認識するので、Sassのデフォルトの桁数(Sassのバージョンによって異なります)では途中で切り上げられてしまい、本来欲しい結果と違う値になる可能性があります。

しかし、どこをどうしたら良いのか分からない・・・。

Sassのフォルダ内の全てのファイルを開いて確認したりしました(笑)が、公式のドキュメントに記載がありました。

Class: Sass::Script::Number
precision

結論としては、 Sass::Script::Number.precision を上書きしてやる事で実現出来ます。

config.rbに以下を追加。

Sass::Script::Number.precision = 10

保存後、コンパイルすると、指定の桁数になると思います。

number.rbをに記述がある事は突き止めたんですが、直接ソースを弄ってしまうとバージョンアップした時に上書きされてしまうので意味が無い。

config.rbに記述するという事実に気付くまで時間がかかってしまいました。