Ana Tudor 🐯
@anatudor@mastodon.social  ·  activity timestamp yesterday

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) } ```
``` @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) } ```
``` @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) } ```
Ana Tudor 🐯
@anatudor@mastodon.social  ·  activity timestamp yesterday

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) } ```
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) } ```
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) } ```