Description
bootstrap/scss/_functions.scss crashes with $n: Invalid index when compiled with Sass 1.x alongside color definitions that use color.adjust(), color.scale(), or other modern Sass color functions.
Root cause
Sass 1.x color functions can return non-integer channel values. For example:
$warning: color.adjust(#f7941c, $lightness: -5%);
// red channel → 241.0063829787 (not 241)
Bootstrap's luminance() function in _functions.scss then uses the raw channel value directly as a list index:
$value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
nth() requires an integer index. Passing 242.006 crashes with:
Error: $n: Invalid index 242.006 for a list with 256 elements.
_functions.scss 191:104 luminance()
Suggested fix
Wrap the index in round() and clamp to the valid range before passing to nth():
$value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, min(255, max(0, round($value))) + 1));
Environment
- Bootstrap: 5.3.8
- Sass (dart-sass): 1.100.0
- Triggered by any
color.adjust() / color.scale() call producing non-integer RGB channels
Description
bootstrap/scss/_functions.scsscrashes with$n: Invalid indexwhen compiled with Sass 1.x alongside color definitions that usecolor.adjust(),color.scale(), or other modern Sass color functions.Root cause
Sass 1.x color functions can return non-integer channel values. For example:
Bootstrap's
luminance()function in_functions.scssthen uses the raw channel value directly as a list index:nth()requires an integer index. Passing242.006crashes with:Suggested fix
Wrap the index in
round()and clamp to the valid range before passing tonth():Environment
color.adjust()/color.scale()call producing non-integer RGB channels