Setting up Sass pkg:
URLs
A quick guide to using the new Node.js package importer
Enabling pkg:
URLs is quick and straightforward, and simplifies using packages from the node_modules
folder.
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.)
pkg:
URLsA quick guide to using the new Node.js package importer
Enabling pkg:
URLs is quick and straightforward, and simplifies using packages from the node_modules
folder.
We explore the useful testing capabilities provided by FastAPI and pytest, and how to leverage them to produce a complete and reliable test suite for your application.
You may not need anything more
When adding interactivity to a web app, it can be tempting to reach for a framework to manage state. But sometimes, all you need is a Proxy.