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

Question

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

$image-size: 200px;

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

Answer 1

您可以使用calc()函数来获得所需的内容.这是实验性的,但仍然很好的支持不同的浏览器.

使用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}");
}

Answer 2

我不明白这是如何工作的，事实上 SASS 无法神奇地知道你的盒子的大小。

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