在SASS中如何从百分比中减去像素？

Question

我知道你能在Sass/Scss中进行一些简单的数学计算。但是有没有一种方法可以从百分比中减去像素？例如：

$image-size: 200px;

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

- realph

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

- Preview

Answer 2

我不认为这会起作用，事实是SASS无法神奇地知道你的盒子大小。

现在如果我理解你的意图，最好的解决方案是将.box的父元素宽度包装成一个变量，然后从该变量中减去您的图片宽度 - 考虑到100％宽度意味着它将获得一定宽度的100％。

- Maxime Fabre

---

calc() 是 Sass 缺失的魔法。这个回答不再正确。 - Seth Battin

@SethBattin说答案“不再正确”并不完全正确：Sass 无法从百分比/em/rem/vh/vw等中减去像素。calc()是CSS的一个特性，而不是Sass的。 - cimmanon

@cimmanon 强调 Sass 不能做某件事情是毫无帮助的区分，因为目标是在 CSS 中实现该功能。使用 Sass 只是样式中额外的复杂性，而 Aperçu 的答案则处理了这种复杂性。 - Seth Battin

@SethBattin 这是一个很重要的区别，特别是如果目标是将值存储到变量中以进行进一步的计算（这不是OP的要求，但这个问题及其答案不仅适用于OP）。我并没有说Aperçu的答案是不正确的，只是你的陈述不完全准确。然而，我同意这个答案是不完整的。 - cimmanon