次のことができるようにしたいです:
height: 25% - 5px;
当然ながら、そうするとエラーが発生します:
Incompatible units: 'px' and '%'.
ベストアンサー1
Sass は、ある単位から次の単位に変換できない値に対しては演算を実行できません。Sass は、ピクセルやその他の単位で「100%」がどのくらいの幅なのかを正確に知る方法がありません。これはブラウザだけが知っていることです。
代わりにを使用する必要がありますcalc()。ブラウザの互換性を確認するには、「Can I use...」をクリックしてください。
.foo {
height: calc(25% - 5px);
}
値が変数内にある場合は、補間を使用して文字列に変換する必要があるかもしれません (そうでない場合、Sass は単に算術演算を実行しようとします)。
$a: 25%;
$b: 5px;
.foo {
width: calc(#{$a} - #{$b});
}