Sass计算百分比减去px

我希望能够做到以下几点：

height: 25% - 5px;

显然，当我这样做时，我会得到错误：

Incompatible units: 'px' and '%'.

---

Sass无法对无法从一个单位转换到下一个单位的值执行算术运算。Sass无法确切知道“100%”的像素或任何其他单位的宽度。这是只有浏览器才知道的

您需要改用

calc（）

如果您的值在变量中，则可能需要使用插值将其转换为字符串（否则Sass仅尝试执行算术）：

---

如果您知道容器的宽度，可以这样做：

#container
  width: #{200}px
  #element
    width: #{(0.25 * 200) - 5}px

---

我知道在很多情况下，容器可能有一个相对宽度。那么这就行不通了。

很抱歉用：after伪选择器恢复旧的线程-指南针拉伸可能适合您的目的-例如，如果您想要一个div来填充屏幕从左到（50%+10px）的宽度，您可以使用（SASS缩进语法）：

---

：after元素填充.example右侧的50%（保留.example宽度的50%），然后将.example拉伸到该宽度加上10px。

在SCSS[编译时]和CSS[运行时]中都有一个

calc

函数。您可能会调用前者而不是后者

出于显而易见的原因，混合单元在编译时不会工作，但在运行时会工作

您可以使用SCSS函数

unquote

强制执行后者

.selector{height:unquote（“-webkit-calc（100%-40px）”）；}

只需将百分比值添加到变量中，然后使用

{$variable}

比如说

$twentyFivePercent:25%;
.selector {
    height: calc(#{$twentyFivePercent} - 5px);
}

---

我得到的

属性值无效

错误。在每个浏览器中，包括Chrome的金丝雀版本。如果有一个Sass功能可以让我得到我想要的东西，那很酷，我只是在玩

calc

…是的：）就像我说的，我不在乎它是如何完成的

calc

是我先做的，但它不起作用。看起来

calc

在我的任何浏览器中都不起作用，所以我想最好是使用sass实现。sass不能充当calc（）的多边形填充。它不知道如何将25%转换成px，这样就可以进行计算并生成CSS。根据您的具体需要，可能会有其他选择，例如使用显示表族、更改方框大小或使用负边距（）我想说，calc（）在大多数浏览器中根本不起作用。移动平台和台式机一样重要。没有争论，但要算上浏览器！更多的人支持calc（），而且在不久的将来还会有更多人支持它！我在calc函数中使用了一个变量，但在这里发现：我可以像这样引用变量：

calc（25%-{$var}）

。通过添加

width:22%

始终可以使用一个回退选项，最重要的是使用

calc

旧线程添加

width

s，但显然，您也可以存储“calc（）”命令本身包含在变量中，因此不需要在整个文件中重复算术运算。示例：$video height:calc（#{$video width}*#{$aspect ratio}）。我的元素{height:$video height；}在某个地方有一个less或sass的混合吗？calc似乎一点也不好用。感谢您发布此问题的答案！堆栈溢出时不鼓励只使用代码的答案，因为没有上下文的代码转储无法解释解决方案的工作方式或原因，这使得原始海报（或任何未来读者）很难理解其背后的逻辑。请编辑您的问题并对代码进行解释，以便其他人可以从您的答案中获益。谢谢那救了我。宽度：unquote（“计算（100%-#{$leftnav width}）”；

#container
  width: #{200}px
  #element
    width: #{(0.25 * 200) - 5}px

.example
    background: red
    +stretch(0, -10px, 0, 0)
    &:after
        +stretch(0, 0, 0, 50%)
        content: ' '
        background: blue

$var:25%;
$foo:5px;
.selector {
    height:unquote("calc( #{$var} - #{$foo} )");
}

$twentyFivePercent:25%;
.selector {
    height: calc(#{$twentyFivePercent} - 5px);
}