https://github.com/xi/sass-planifolia

Vanilla Sass helper functions
https://github.com/xi/sass-planifolia

a11y color contrast math sass

Last synced: about 1 month ago
JSON representation

Vanilla Sass helper functions

• Host: GitHub
• URL: https://github.com/xi/sass-planifolia
• Owner: xi
• License: mit
• Created: 2016-03-03T15:46:37.000Z (almost 9 years ago)
• Default Branch: main
• Last Pushed: 2022-07-15T04:45:06.000Z (over 2 years ago)
• Last Synced: 2024-09-28T04:13:21.755Z (3 months ago)
• Topics: a11y, color, contrast, math, sass
• Language: JavaScript
• Homepage: https://xi.github.io/sass-planifolia/
• Size: 2.02 MB
• Stars: 40
• Watchers: 7
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGES.md
  • License: LICENSE

Awesome Lists containing this project

README

        
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:

-   **contrast** for WCAG compatible [color

    contrast](https://www.w3.org/TR/WCAG20/#contrast-ratiodef) functions

-   **color** for color functions with supper for different color spaces, e.g.

    CIELAB, CIELUV, or [HSLuv](http://www.hsluv.org/)

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](https://xi.github.io/sass-planifolia/) for more

details.

# Quick start

    npm install sass-planifolia

Import it in your Sass files:

```scss

@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?

-   Vendor prefixes, polyfills or browser hacks. There are plenty of librariers

    for that.

-   pt/px/em/rem conversion. That is (a) not possible and (b) not helpful. Each

    unit has its specific use case. Learn to use the right units directly!

# Similar libraries

-   [CSS Color Moudle Level 4](https://www.w3.org/TR/css-color-4/) and [CSS

    Color Module Level 5](https://www.w3.org/TR/css-color-5/) are W3C Working

    Drafts (as of 2022-04-28) that would add similar features to CSS itself.

-   [PostCSS](https://postcss.org/) and [Parcel](https://github.com/parcel-bundler/parcel-css) both

    implement some of the functionality of CSS Color Module Level 4/5.

-   [oddbird/blend](https://github.com/oddbird/blend) is yet another Sass

    library that implements similar features. The main difference is that the

    contrast function do not take transparency into account.