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>

The CSS rgba() function takes the red, green and blue channels as separate numbers, so a hex code or a color name inside it, as in rgba(#1f2937, 0.75), is invalid.

Passing a whole color to rgba() is Sass syntax. Sass has its own rgba() that accepts a color and an alpha value, and the compiler turns rgba(#1f2937, 0.75) into rgba(31, 41, 55, 0.75). CSS has no such form, so when that code sits in a .css file, a <style> element or a style attribute, the browser gets it as written and drops the whole declaration. The element then keeps whatever background, border, shadow or text color earlier rules gave it, which can put light text on a light background. The validator names the property and quotes the argument it rejected. It reports rgb() the same way, and also flags a color keyword such as red or currentcolor in that position.

A compiled Sass file can still contain the error inside a custom property. Sass copies custom property values to the CSS as written, so --overlay: rgba(#1f2937, 0.75); comes out of the compiler unchanged, and the validator reports it under --overlay. Write --overlay: #{rgba(#1f2937, 0.75)}; instead, and Sass computes the value before writing it out.

To fix the CSS directly, convert the hex code to its three channels (#1f2937 is 31, 41, 55) and write rgba(31, 41, 55, 0.75), or rgb(31 41 55 / 0.75) in the space-separated syntax. A hex code can also take the alpha as two extra digits: #1f2937bf is the same color at about 75% opacity. To keep the original hex code, use relative color syntax, rgb(from #1f2937 r g b / 0.75), which current versions of the major browsers support.

Invalid example

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Overlay</title>

<style>

.overlay {

background: rgba(#1f2937, 0.75);

color: #fff;

}

</style>

</head>

<body>

<div class="overlay">

<p>Sunset over the harbor</p>

</div>

</body>

</html>

Valid example

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Overlay</title>

<style>

.overlay {

background: rgba(31, 41, 55, 0.75);

color: #fff;

}

</style>

</head>

<body>

<div class="overlay">

<p>Sunset over the harbor</p>

</div>

</body>

</html>

Valid example with relative color syntax

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Overlay</title>

<style>

.overlay {

background: rgb(from #1f2937 r g b / 0.75);

color: #fff;

}

</style>

</head>

<body>

<div class="overlay">

<p>Sunset over the harbor</p>

</div>

</body>

</html>