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

Question

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

$image-size: 200px;

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

Answer 1

您可以使用 calc() 功能来获得你想要的东西。这是实验性的，但仍然是 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}");
}