Sass计算百分比减去px

Question

我希望能够做到以下几点:

height: 25% - 5px;

显然，当我这样做时，我得到了错误:

Incompatible units: 'px' and '%'.

Answer 1

Sass 无法对无法从一个单位转换为下一个单位的值执行算术运算。 Sass 无法确切知道“100%”在像素或任何其他单位方面的宽度。这是只有浏览器知道的事情。

您需要改用calc()。 Check browser compatibility on Can I use...

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

如果你的值在变量中，你可能需要使用插值将它们变成字符串(否则 Sass 只会尝试执行算术):

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

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