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.)
Using modern CSS units and math functions
When I tried setting my browser font-size preferences, I found it broke more sites than it improved, and I quickly moved back to the default. So what went wrong, and how can we fix it?
A guide to using new color spaces & formats with OddContrast
OddBird’s color tool not only checks contrast ratios, but supports the new CSS color formats and spaces.
hint popovers, position-area and more
We have been busy updating the Popover and CSS Anchor Positioning Polyfills, but there is still more we can do with your help.