HTML Guides for sass

A max-width declaration subtracts a length from the none keyword, and a keyword can't take part in arithmetic.

none means the element has no maximum width, which leaves nothing to subtract 20 pixels from. CSS identifiers can contain hyphens and digits, so the browser reads none-20px as one unknown keyword and drops the declaration. The element then takes its max-width from an earlier rule, or has no limit at all. Adding spaces doesn't help: none - 20px is a parse error, and calc(none - 20px) fails too, because calc() only works with numeric values such as lengths and percentages.

A value like this is usually the output of a preprocessor. In Sass, $max-width - 20px compiles to none-20px when $max-width is none. To Sass, none is a string, and its - operator joins a string and another value with a hyphen instead of subtracting.

Work out which width you meant. To keep the element 20 pixels narrower than its container, use calc(100% - 20px). If you didn't want a limit, write none on its own. In a Sass mixin or function, only subtract from the variable when it holds a length, and output none unchanged otherwise.

Invalid example

<div style="max-width: none-20px;">

<p>This panel was meant to stay 20 pixels narrower than its container.</p>

</div>

Valid example

<div style="max-width: calc(100% - 20px);">

<p>This panel stays 20 pixels narrower than its container.</p>

</div>