You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

пре 3 година
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. # PostCSS Lab Function [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
  2. [![NPM Version][npm-img]][npm-url]
  3. [![CSS Standard Status][css-img]][css-url]
  4. [![Build Status][cli-img]][cli-url]
  5. [![Support Chat][git-img]][git-url]
  6. [PostCSS Lab Function] lets you use `lab`, `lch`, and `gray` color functions in
  7. CSS, following the [CSS Color] specification.
  8. ```pcss
  9. :root {
  10. --firebrick: lab(40 56.6 39);
  11. --firebrick-a50: lch(40 68.8 34.5 / 50%);
  12. --gray-40: gray(40);
  13. --gray-40a50: gray(40 / .5);
  14. }
  15. /* becomes */
  16. :root {
  17. --firebrick: rgb(178, 34, 34);
  18. --firebrick-a50: rgba(178, 34, 34, .5);
  19. --gray-40: rgb(94,94,94);
  20. --gray-40a50: rgba(94,94,94, .5);
  21. }
  22. ```
  23. ## Usage
  24. Add [PostCSS Lab Function] to your project:
  25. ```bash
  26. npm install postcss-lab-function --save-dev
  27. ```
  28. Use [PostCSS Lab Function] to process your CSS:
  29. ```js
  30. const postcssLabFunction = require('postcss-lab-function');
  31. postcssLabFunction.process(YOUR_CSS /*, processOptions, pluginOptions */);
  32. ```
  33. Or use it as a [PostCSS] plugin:
  34. ```js
  35. const postcss = require('postcss');
  36. const postcssLabFunction = require('postcss-lab-function');
  37. postcss([
  38. postcssLabFunction(/* pluginOptions */)
  39. ]).process(YOUR_CSS /*, processOptions */);
  40. ```
  41. [PostCSS Lab Function] runs in all Node environments, with special
  42. instructions for:
  43. | [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
  44. | --- | --- | --- | --- | --- | --- |
  45. ## Options
  46. ### preserve
  47. The `preserve` option determines whether the original functional color notation
  48. is preserved. By default, it is not preserved.
  49. ```js
  50. postcssLabFunction({ preserve: true })
  51. ```
  52. ```pcss
  53. :root {
  54. --firebrick: lab(40 56.6 39);
  55. --firebrick-a50: lch(40 68.8 34.5 / 50%);
  56. }
  57. /* becomes */
  58. :root {
  59. --firebrick: rgb(178, 34, 34);
  60. --firebrick: lab(40 56.6 39);
  61. --firebrick-a50: rgba(178, 34, 34, .5);
  62. --firebrick-a50: lch(40 68.8 34.5 / 50%);
  63. }
  64. ```
  65. [cli-img]: https://img.shields.io/travis/jonathantneal/postcss-lab-function.svg
  66. [cli-url]: https://travis-ci.org/jonathantneal/postcss-lab-function
  67. [css-img]: https://cssdb.org/badge/lab-function.svg
  68. [css-url]: https://cssdb.org/#lab-function
  69. [git-img]: https://img.shields.io/badge/support-chat-blue.svg
  70. [git-url]: https://gitter.im/postcss/postcss
  71. [npm-img]: https://img.shields.io/npm/v/postcss-lab-function.svg
  72. [npm-url]: https://www.npmjs.com/package/postcss-lab-function
  73. [CSS Color]: https://drafts.csswg.org/css-color/#specifying-lab-lch
  74. [Gulp PostCSS]: https://github.com/postcss/gulp-postcss
  75. [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
  76. [PostCSS]: https://github.com/postcss/postcss
  77. [PostCSS Loader]: https://github.com/postcss/postcss-loader
  78. [PostCSS Lab Function]: https://github.com/jonathantneal/postcss-lab-function