使用 sass 算术运算符时出现 W3c 验证错误

Question

我正在尝试使用 w3c 验证程序验证我的网站，我有以下 sass 代码。

$paddingXL: 140px;
.wrapper {
    width: 100%;
    max-width: 1360px + #{$paddingXL * 2} + 40px;
    margin-left: auto;
    margin-right: auto;
}

编译成下面的css代码

.Wrapper {
    width: 100%;
    max-width: 1360px + 280px + 40px;
    margin-left: auto;
    margin-right: auto
}

以上代码在 w3c 上抛出以下验证错误

Error: CSS: Parse Error.

 + 280px + 40px;margin-left:au

并且验证器突出显示“；”在“40px”之后，有人可以帮我通过 w3c 验证

Answer 1

max-width: 1360px + 280px + 40px; 无效 css。您可以在 sass 中计算宽度：max-width: 1360px + $paddingXL * 2 + 40px;。只需删除 #{}.

Answer 2

如果在 calc 中包围表达式，您将获得所需的值：

$paddingXL: 140px;
.wrapper {
    width: 100%;
    max-width: calc(1360px + #{$paddingXL * 2} + 40px);
    margin-left: auto;
    margin-right: auto;
}

使用 sass 算术运算符时出现 W3c 验证错误

W3c validation error while using sass arithmetic operator

css

sass

w3c-validation