Home

Awesome

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.

Quick start

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');
}

What is not included?

Similar libraries