2.9 KiB
2.9 KiB
PostCSS Lab Function
PostCSS Lab
Function lets you use lab
, lch
, and
gray
color functions in CSS, following the CSS
Color specification.
:root {
--firebrick: lab(40 56.6 39);
--firebrick-a50: lch(40 68.8 34.5 / 50%);
--gray-40: gray(40);
--gray-40a50: gray(40 / .5);
}
/* becomes */
:root {
--firebrick: rgb(178, 34, 34);
--firebrick-a50: rgba(178, 34, 34, .5);
--gray-40: rgb(94,94,94);
--gray-40a50: rgba(94,94,94, .5);
}
Usage
Add PostCSS Lab Function to your project:
npm install postcss-lab-function --save-dev
Use PostCSS Lab Function to process your CSS:
const postcssLabFunction = require('postcss-lab-function');
.process(YOUR_CSS /*, processOptions, pluginOptions */); postcssLabFunction
Or use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssLabFunction = require('postcss-lab-function');
postcss([
postcssLabFunction(/* pluginOptions */)
.process(YOUR_CSS /*, processOptions */); ])
PostCSS Lab Function runs in all Node environments, with special instructions for:
Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt |
---|
Options
preserve
The preserve
option determines whether the original
functional color notation is preserved. By default, it is not
preserved.
postcssLabFunction({ preserve: true })
:root {
--firebrick: lab(40 56.6 39);
--firebrick-a50: lch(40 68.8 34.5 / 50%);
}
/* becomes */
:root {
--firebrick: rgb(178, 34, 34);
--firebrick: lab(40 56.6 39);
--firebrick-a50: rgba(178, 34, 34, .5);
--firebrick-a50: lch(40 68.8 34.5 / 50%);
}