Given the end steps (00272b & e0ff4f) + a number n of steps, create a gradient with n equal & equidistant steps.
Generating them in a #Sass loop is always an option, but every gradient with different end steps gets its own long stop list & modifying an end step in DevTools doesn't change ALL steps. 馃ゴ
You can see it in the live demo https://codepen.io/thebabydino/pen/xbxeyOM
#cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment
sass-mix-with-hex.scss file:
```
@use 'sass:math';
// $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, initially empty
@for $i from 0 to $n {
$l: $l, mix($c1, $c0, $i*100%/($n - 1))
// 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(($i + 1)*100%/$n*math.pow(10, $p))*math.pow(10, -$p), unquote(''))
}
@return $l
}
.step {
background:
linear-gradient(90deg, stop-list(#00272b, #e0ff4f, 10))
}
```
Compiled sass-mix-with-hex.css file:
```
.step {
background:
linear-gradient(90deg,
#00272b 10%, #193f2f 0 20%, #325833 0 30%, #4b6f36 0 40%, #64873b 0 50%,
#7c9f3f 0 60%, #95b743 0 70%, #aecf47 0 80%, #c7e74b 0 90%, #e0ff4f 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.