function-calculation-no-interpolation

Disallow interpolation in calc(), clamp(), min(), and max() functions.

.a { .b: calc(#{$c} + 1); }
/**            ↑
      * This argument */

Since the release of first-class calc(), calculation functions calc(), clamp(), min(), and max() accept variables and function calls as arguments. This rule disallows interpolation to avoid extra verbose or even invalid CSS.

Options

true

The following patterns are considered warnings:

$c: 1;
.a { .b: calc(#{$c + 1}); }

$c: 1;
.a { .b: calc(max(#{$c})); }

$c: 1;
.a { .b: min(#{$c}); }

$c: 1;
.a { .b: clamp(#{$c} + 2px); }

The following patterns are not considered warnings:

.a { .b: calc(1 + 1); }

$c: 1;
.a { .b: abc(#{$c} + 1px); }

$c: 1;
.a { .b: calc(abc(#{$c})); }