从SASS中的百分比中减去像素？

Question

我知道你可以在Sass/Scss中做一些简单的数学运算。但是有没有办法从百分比中减去像素呢？例如：

$image-size: 200px;

.bio {
    width: 100% - $image-size;
}

Answer 1

我甚至看不出这是如何工作的，事实上，萨斯不能神奇地知道你的盒子有多大。

现在，如果我知道你想做什么，最好的解决方案是将.box的父宽度包装到一个变量中，然后将图像宽度减去该变量-考虑到100%宽度意味着它将获得特定宽度的100%。

Answer 2

您可以使用函数来获得您想要的内容。它是实验性的，但仍然可以在不同的浏览器上使用pretty good supported。

有了Sass，你可以创建一个calc mixin，让它在更多浏览器版本上使用-webkit和-moz前缀(不需要Opera )：

@mixin calc($key, $value) {
  #{$key}: -webkit-calc(#{$value});
  #{$key}: -moz-calc(#{$value});
  #{$key}: calc(#{$value});
}

然后用下面这样的方式调用它：

.bio {
  @include calc("width", "100% - #{$image-size}");
}