Ошибка проверки W3c при использовании арифметического оператора sass

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;
}