README.md

dimension-no-non-numeric-values

Interpolating a value with a unit (e.g. #{$value}px) results in a string value, not as numeric value. This value then cannot be used in numerical operations. It is better to use arithmetic to apply a unit to a number (e.g. $value * 1px).

This rule requires that all interpolation for values should be in the format $value * 1<unit> instead of #{value}<unit>

$value: 4;

p {
  padding: #{value}px;
//         ↑         ↑
//  should be $value * 1px
}

Options

true

The following patterns are considered violations:

$value: 4;

p {
  padding: #{value}px;
}

The following patterns are not considered violations:

$value: 4;

p {
  padding: $value * 1px;
}

List of units

Font-relative lengths (link)

• em
• ex
• cap
• ch
• ic
• rem
• lh
• rlh

Viewport-relative lengths (link)

• vw
• vh
• vi
• vb
• vmin
• vmax

Absolute lengths (link)

• cm
• mm
• Q
• in
• pc
• pt
• px

Angle units (link)

• deg
• grad
• rad
• turn

Duration units (link)

• s
• ms

Frequency units (link)

• Hz
• kHz

Resolution units (link)

• dpi
• dpcm
• dppx
• x

Flexible lengths (link)

• fr