walk

PostCSS Shade

A PostCSS plugin to adjust or change the shade of a color

Installation

npm install postcss-shade

Examples

Simple use, setting shade percentage

/* input */
div { color: shade(#34bbed, 80) }

/* output */
div { color: #2da0cc }

Adjusting shade

/* input */
div { color: shade(#34bbed, +10) }
div.other { color: shade(#34bbed, -10) }

/* output */
div { color: #38c8ff }
div.other { color: #2ea6d3 }

Usage

Postcss JS API

postcss([require('postcss-shade')]).process(yourCSS);

Gulp

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const shade = require('postcss-shade');
gulp.task('css', () => {
    gulp.src('path/to/dev/css')
        .pipe(postcss([
            shade()
        ]))
        .pipe(gulp.dest('path/to/build/css'));
});

Tests

npm test

License

This project is licensed under the MIT License.