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验证错误

2 个答案: