Vanilla Sass helper functions
Sass-Planifolia - Vanilla Sass helper functions
This is a collection of vanilla Sass helper functions, mostly centered around colors. It currently consists of only two modules:
These modules can be imported individually. The only define mixins and variables. They will not output any CSS. This means that importing them does not add a single byte to your CSS.
See the full documentation for more details.
npm install sass-planifolia
Import it in your Sass files:
@use "node_modules/sass-planifolia/sass/contrast";
@use "node_modules/sass-planifolia/sass/color";
.test {
background-color: red;
// pick between two colors (default: black and white) to get good contrast
color: contrast.color(red);
// mix orange with black or white to get good contrast to red
border-color: contrast.stretch(red, orange);
// mix red with black in a perceptually uniform color space
box-shadow: 0 0 1em color.shade(red, 0.5, 'lab');
}