Sass 计算百分比减去 px

Posted 2023-03-06

【中文标题】Sass 计算百分比减去 px

【英文标题】：Sass calculate percent minus px

【发布时间】：2012-10-27 19:07:43

【问题描述】：

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

height: 25% - 5px;

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

Incompatible units: 'px' and '%'.

【问题讨论】：

我收到 Invalid property value 错误。在包括 Chrome 的 Canary 版本在内的所有浏览器中。

如果有一个 Sass 函数可以让我得到我想要的那很酷，我只是在玩 calc ...

是的 :) 就像我说的我不在乎它是如何完成的 calc 是我先走了，但它没有工作。看起来calc 在我的任何浏览器中都不起作用，所以我猜最好使用 sass 实现。

Sass 不能充当 calc() 的 polyfill。它不知道如何将 25% 转换为 px，因此它可以进行数学运算并生成 CSS。根据您的确切需求，可能会有其他选择，例如使用 display-table 系列、更改框大小或使用负边距 (jsfiddle.net/5JZGt)

【参考方案1】：

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

您需要改用calc()。 Check browser compatibility on Can I use...

.foo 
    height: calc(25% - 5px);

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

$a: 25%;
$b: 5px;

.foo 
  width: calc(#$a - #$b);

【讨论】：

我会说 calc() 在大多数浏览器中根本不起作用。移动平台与台式机一样重要。

这里没有参数，但计算浏览器！对 calc() 的支持比不支持的多，在不久的将来还会支持更多！

我在 calc 函数中使用变量时遇到宽度问题，但在这里找到：***.com/questions/13542164/… 我可以像这样引用变量：calc(25% - #$var)。

您始终可以通过将width: 22% 添加到widths 和calc 来使用备用选项

旧线程，但显然，您也可以将“calc()”命令本身存储在变量中，因此您无需在整个文件中重复算术运算。示例：$video-height: calc(#$video-width * #$aspect-ratio); .my-elements 高度：$视频高度；

【参考方案2】：

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

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

我知道在许多情况下#container 可能具有相对宽度。那就不行了。

【参考方案3】：

抱歉恢复旧线程 - Compass 使用 :after 伪选择器进行拉伸可能适合您的目的 - 例如。如果你想让一个 div 从左边填充宽度到屏幕的（50% + 10px），你可以使用（在 SASS 缩进语法中）：

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

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

【讨论】：

这个地方有没有少一些或粗俗的混音？ calc 似乎根本不能很好地工作。

【参考方案4】：

在 SCSS [编译时] 和 CSS [运行时] 中都有一个 calc 函数。您可能会调用前者而不是后者。

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

您可以使用 SCSS 函数 unquote 强制后者。

.selector  height: unquote("-webkit-calc(100% - 40px)"); 

【参考方案5】：

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

【讨论】：

感谢您发布此问题的答案！在 Stack Overflow 上不鼓励仅使用代码的答案，因为没有上下文的代码转储无法解释解决方案的工作方式或原因，这使得原始发布者（或任何未来的读者）难以理解其背后的逻辑。请编辑您的问题并包含对您的代码的解释，以便其他人可以从您的回答中受益。谢谢！

这救了我。宽度: unquote("calc( 100% - #$leftnav-width )");

【参考方案6】：

只需将百分比值添加到变量中并使用#$variable 例如

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