Sass计算百分比减去px [英] Sass calculate percent minus px

问题描述

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

I want to be able to do the following:

height: 25% - 5px;

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

Obviously when I do that I get the error:

Incompatible units: 'px' and '%'.

推荐答案

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

Sass cannot perform arithmetic on values that cannot be converted from one unit to the next. Sass has no way of knowing exactly how wide "100%" is in terms of pixels or any other unit. That's something only the browser knows.

您需要使用 calc() 代替.检查浏览器兼容性是否可以使用...

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

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

If your values are in variables, you may need to use interpolation turn them into strings (otherwise Sass just tries to perform arithmetic):

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

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

这篇关于Sass计算百分比减去px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！