Using CSS variables solves both these problems, but we cannot use #CSS variables inside the #Sass mix() function, we have to use the CSS color-mix(). This means the compiled output looks way uglier.
You can check it out in this @codepen demo https://codepen.io/thebabydino/pres/bNdjKwJ
#cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment #cssVariables
```
@use 'sass:math';
// $n: number to round to a certain precision
// $p: rounding precision, how many decimals to keep
@function round-to($n, $p: 2) {
@return round($n*math.pow(10, $p))*math.pow(10, -$p)
}
// $c0: gradient start
// $c1: gradient end
// $n: number of steps
// $p: rounding precision, how many decimals to keep
@function stop-list($c0, $c1, $n, $p: 2) {
$l: (); // list of stops
@for $i from 0 to $n {
$l: $l,
if($i > 0,
if($i < $n - 1,
color-mix(in srgb, $c1 round-to($i*100%/($n - 1), $p), $c0),
$c1),
$c0)
// 1st stop position for each stop
// not set (empty '') for very first stop
if($i > 0, 0, unquote(''))
// 2nd stop position for each stop
// not set (empty '') for very last stop
if($i < $n - 1, round-to(($i + 1)*100%/$n, $p), unquote(''))
}
@return $l
}
p {
background: linear-gradient(90deg, stop-list(var(--c0), var(--c1), 10))
}
```
```
p {
background: linear-gradient(90deg,
var(--c0) 10%,
color-mix(in srgb, var(--c1) 11.11%, var(--c0)) 0 20%,
color-mix(in srgb, var(--c1) 22.22%, var(--c0)) 0 30%,
color-mix(in srgb, var(--c1) 33.33%, var(--c0)) 0 40%,
color-mix(in srgb, var(--c1) 44.44%, var(--c0)) 0 50%,
color-mix(in srgb, var(--c1) 55.56%, var(--c0)) 0 60%,
color-mix(in srgb, var(--c1) 66.67%, var(--c0)) 0 70%,
color-mix(in srgb, var(--c1) 77.78%, var(--c0)) 0 80%,
color-mix(in srgb, var(--c1) 88.89%, var(--c0)) 0 90%,
var(--c1) 0)
}
```
Screenshot of the modified Sass mixin using CSS variables and `color-mix()`. On the right, we also have a DevTools panel open, showing the changing one of the end steps changes all intermediary ones this way.