コメント募集: ファーストクラス計算

Sassで最も多く要望されている機能の1つに、calc()式をより簡単に扱う機能があります。これらの式はこれまで不透明に解析されてきました。括弧内には任意のテキストを入れることができ、Sassはそれを引用符なしの文字列として扱います。これにより、Sassのパースが簡素化され、calc()の特定のマイクロ構文をサポートする必要がなくなり、CSS変数のcalc()内での使用など、新しい機能を自動的にサポートできるようになりました。

しかし、これはかなりの使い勝手の悪さにも繋がります。各calc()がSassのパースにとって完全に不透明であるため、ユーザーはSass変数を値の代わりに単純に使用することはできず、変数を明示的に補間する必要があります。そして、calc()式が作成されると、通常の数値のようにSassで操作することはできなくなります。

"ファーストクラス計算"と呼ばれる新しい提案で、これを変更しようとしています。この提案では、calc()（およびその他のサポートされている数学関数）を引用符なしの文字列として解析するのではなく、詳細に解析し、場合によっては（必ずしもそうとは限りませんが）"計算"と呼ばれる新しいデータ型を生成します。このデータ型は、calc(10% + 5px)など、コンパイル時に解決できない数学式を表し、それらの式をさらに数学関数内で適切に組み合わせることができます。

より具体的に言うと、calc()式はCSS構文に従って解析され、Sass変数、関数、および（後方互換性のために）補間が追加でサポートされます。Sassはコンパイル時に可能な限り多くの数学演算を実行し、結果が単一の数値であれば、通常のSass数値型として返します。そうでない場合は、ブラウザで解決できる（簡略化された）式を表す計算を返します。

例：

• calc(1px + 10px) は数値 11px を返します。

• 同様に、$lengthが10pxの場合、calc(1px + $length)は11pxを返します。

• しかし、calc(1px + 10%)は計算式calc(1px + 10%)を返します。

• $lengthがcalc(1px + 10%)の場合、calc(1px + $length)はcalc(2px + 10%)を返します。

• Sass関数はcalc()内で直接使用できるため、calc(1% + math.round(15.3px))はcalc(1% + 15px)を返します。

計算は一般的に数値の代わりに使用できません。たとえば、1px + calc(1px + 10%)はエラーが発生し、math.round(calc(1px + 10%))も同様です。これは、計算を数値と交換して使用できないため（計算をmath.sqrt()に渡すことはできません）数学関数が計算をサポートするかどうかを、すべての数学演算をcalc()でラップするか、通常のSass算術演算を使用するかによって明示的にする必要があるためです。

後方互換性のために、補間を含むcalc()式は、以前の非常に寛容な構文を使用して解析され続けますが、この動作は最終的に非推奨となり削除されます。これらの式は計算値を返し続けますが、簡略化されたり、単純な数値に解決されたりすることはありません。

ご意見をお聞かせください！ご意見をお聞かせください！

この提案の詳細を知りたい場合は、GitHubで全文を読むことができます。今後1ヶ月間、コメントと改訂を受け付けていますので、変更してほしい点があれば、issueを提出していただき、議論しましょう。