Sass计算百分比减px

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

height: 25% - 5px; 

显然，当我这样做，我得到的错误：

 Incompatible units: 'px' and '%'. 

Answer 1

Sass不能对不能从一个单元转换到下一个单元的值进行算术运算。 Sass无法准确知道像素或其他任何单位的“100％”究竟有多宽。 这是只有浏览器知道的东西。

你需要使用calc()来代替。 检查浏览器兼容性我可以使用…

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

如果你的值是在variables中，你可能需要使用插值把它们变成string（否则Sass只是试图执行算术）：

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

Answer 2

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

由于显而易见的原因，混合单元将不能在编译时运行，而是在运行时运行。

您可以使用unquote （SCSS函数）强制后者。

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

Answer 3

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

Answer 4

如果你知道容器的宽度，你可以这样做：

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

我知道，在许多情况下#container可以有一个相对宽度。 那么这是行不通的。

Answer 5

对不起，要恢复旧的线程 – 指南针'拉伸：在伪select符后可能适合您的目的 – 例如。 如果你想要一个div来填充从左到右（50％+ 10px）的屏幕宽度，你可以使用（SASS缩进语法）：

 .example background: red +stretch(0, -10px, 0, 0) &:after +stretch(0, 0, 0, 50%) content: ' ' background: blue 

：after元素在.example右侧填充50％（剩下50％可用于.example的宽度），然后.example被拉伸到这个宽度加上10px。