萨斯计算百分比减去px

我希望能够执行以下操作：

height: 25% - 5px;

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

Incompatible units: 'px' and '%'.

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

您需要calc()改用。 在“我可以使用...上检查浏览器的兼容性...

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

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

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

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

calcSCSS [编译时]和CSS [运行时]中都有一个功能。您可能会调用前者而不是后者。

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

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

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

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

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

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

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

很抱歉恢复旧线程-使用：after伪选择器进行的Compass拉伸可能适合您的目的-例如。如果您希望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。

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

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