Start by setting a variable to the colors you want:
$rainbow: red orange yellow green blue indigo violet;You could set individual variables for each color as well. You would still pass them all as a single argument, or join them into a single variable before passing, as you see fit.
Here’s the function:
// Returns a striped gradient for use anywhere gradients are accepted.
// - $position: the starting position or angle of the gradient.
// - $colors: a list of all the colors to be used.
@function stripes($position, $colors) {
$colors: if(type-of($colors) != 'list', compact($colors), $colors);
$gradient: compact();
$width: 100% / length($colors);
@for $i from 1 through length($colors) {
$pop: nth($colors,$i);
$new: $pop ($width * ($i - 1)), $pop ($width * $i);
$gradient: join($gradient, $new, comma);
}
@return linear-gradient($position, $gradient);
}And how to use it:
.rainbow {
@include background-image(stripes(left, $rainbow));
}Jina has posted a demo and explanation on CodePen.
(The real lesson here is that all the colors of the rainbow are acceptable CSS color keywords. Go forth and queer the web.)
Learn how to leverage Web Platform Tests to ensure your polyfills are implementing upcoming browser features correctly, including how to generate a comprehensive report of failing/passing tests on each change.
OddBird sponsored Python Web Conference 2023 and sent me to attend. In this article I showcase my favorite talks and activities from this excellent online event, including a list of useful resources for web application security, introductions to new PaaS providers, and a comparison of the most popular Python web frameworks.
Learn how to run Playwright in headed mode to interact with the browser’s user interface from outside Docker containers.