percentage - 从 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%。