计算百分比减去 px

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

height: 25% - 5px;

很明显，当我这样做的时候，我得到了错误:

Incompatible units: 'px' and '%'.
158486 次浏览
小开
最佳答案

Sass 不能对不能从一个单元转换到下一个单元的值执行算术。萨斯没有办法准确地知道“100%”在像素或任何其他单位方面的宽度。只有浏览器知道。

您需要使用 calc()代替

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

如果你的值是在变量中，你可能需要使用插值把它们变成字符串(否则 Sass 只是试图执行算术) :

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


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

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

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

我知道在许多情况下 # 容器可能有一个相对宽度。然后这将不工作。

小开

很抱歉重新启用旧的线程-Compass’的拉伸使用: after 伪选择符可能适合你的用途-例如，如果你想要一个 div 来填充屏幕从左到(50% + 10px)的宽度，你可以使用(在 SASS 缩进语法中) :

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

元素的右侧填充50% 。例子(保留50% 可供。例子的宽度) ，然后。例子被拉伸到那个宽度加上10px。

小开

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

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

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

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

只需将百分比值添加到一个变量中，然后使用 #{$variable} 比如说

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

提交答案