Conver sass math to css calc

[JonatasAmaral]

What

Convert all sass math to css calc()

Why

It allow us to pass css custom properties ( --variable) to all size related variables

$thumb-height: var(--thumb-size);
$track-shadow-size: var(--shadow-size);

what facilitates "state based" and responsive styling override

...

input[type="range"] {
    --thumb-size: 20px;
    --shadow-size: 3px;

    &:hover {
        --shadow-size: 6px;
    }

    @media(min-width: 470px) {
        --thumb-size: 26px;
    }
}

That's why i think it worth bring it up, at least for a discussion.

Caviats

This approach may get errors with "unit less" zeros involved in calculations

$track-border-width: 0; // error "silently" breaks the range input

So it is mandatory to set some unit an zeroing a variable out

$track-border-width: 0px; // works 

[andrewbaxter]

Another reason is so you can mix units (like em and px).

[JonatasAmaral]

Yeah, that's a nice feat too