sass - Sass 计算百分比减去 px

Question

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

height: 25% - 5px;

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

Incompatible units: 'px' and '%'.

score 287 · Accepted Answer

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

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

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

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

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

score 28 · Accepted Answer

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

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

unquote您可以通过使用SCSS 函数来强制执行后者。

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

score 15 · Accepted Answer

15

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

于 2015-08-16T02:41:39.997 回答

score 7 · Accepted Answer

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

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

我知道在许多情况下#container 可能有一个相对宽度。那么这行不通。

score 2 · Accepted Answer

很抱歉恢复旧线程 - 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。

score 1 · Accepted Answer

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

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

6 回答 6