[解決済み] Sassはパーセントマイナスpxを計算する

質問

次のようなことができるようにしたい。

height: 25% - 5px;

これを実行すると、明らかにエラーが発生します。

Incompatible units: 'px' and '%'.

解決方法は？

Sassは、ある単位から次の単位に変換できない値に対して演算を行うことができません。 Sass は、"100%" がピクセルやその他の単位でどの程度の幅なのかを正確に知る術がありません。 それはブラウザだけが知っていることです。

を使用する必要があります。 calc() の代わりに Can I use...でブラウザの互換性を確認する。

.foo {
    height: calc(25% - 5px);
}

値が変数にある場合、それらを文字列に変換する補間を使用する必要があるかもしれません (そうでなければ、Sass は単に算術を実行しようとします)。

$a: 25%;
$b: 5px;

.foo {
  width: calc(#{$a} - #{$b});
}