Sass计算百分比减去px

Question

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

height: 25% - 5px;

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

Incompatible units: 'px' and '%'.

Answer 1

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

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

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

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

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

我会说calc()在大多数浏览器中都不起作用.移动平台与台式机一样重要. (5认同)
我在calc函数中使用变量来解决宽度问题,但在此处找到:http://stackoverflow.com/questions/13542164/using-variables-in-sass-percentage-function我可以像这样引用变量:`calc (25% - #{$ var})`. (4认同)
没有争论,但计算浏览器!更多支持calc()而不是,在不久的将来甚至会支持它! (2认同)
你总是可以使用一个回退选项,在`width`上面加上`width:22%` (2认同)

Answer 2

calcSCSS [编译时]和CSS [运行时]都有一个函数.你可能会调用前者而不是后者.

由于显而易见的原因,混合单元不能在编译时运行,但会在运行时运行.

您可以使用unquoteSCSS函数强制后者.

.selector { height: unquote("-webkit-calc(100% - 40px)"); }

Answer 3

$var:25%;
$foo:5px;
.selector {
    height:unquote("calc( #{$var} - #{$foo} )");
}

感谢您发布此问题的答案！Stack Overflow 上不鼓励仅使用代码的答案，因为没有上下文的代码转储无法解释解决方案如何或为什么会起作用，这使得原始发布者（或任何未来的读者）难以理解其背后的逻辑。请编辑您的问题并包括对您的代码的解释，以便其他人可以从您的回答中受益。谢谢！ (2认同)

Answer 4

如果你知道容器的宽度,你可以这样做:

#container
  width: #{200}px
  #element
    width: #{(0.25 * 200) - 5}px

我知道在很多情况下#container可能有相对宽度.然后这不起作用.