diff options
Diffstat (limited to 'node_modules/postcss-calc/README.md')
| -rwxr-xr-x | node_modules/postcss-calc/README.md | 90 |
1 files changed, 54 insertions, 36 deletions
diff --git a/node_modules/postcss-calc/README.md b/node_modules/postcss-calc/README.md index 2c207402..4cabf731 100755 --- a/node_modules/postcss-calc/README.md +++ b/node_modules/postcss-calc/README.md @@ -1,16 +1,16 @@ -# PostCSS Calc [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">][PostCSS] +# postcss-calc [](https://travis-ci.org/postcss/postcss-calc) -[![NPM Version][npm-img]][npm-url] -[![Support Chat][git-img]][git-url] +> [PostCSS](https://github.com/postcss/postcss) plugin to reduce `calc()`. -[PostCSS Calc] lets you reduce `calc()` references whenever it's possible. -When multiple units are mixed together in the same expression, the `calc()` -statement is left as is, to fallback to the [W3C calc() implementation]. +This plugin reduce `calc()` references whenever it's possible. +This can be particularly useful with the [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties) plugin. + +**Note:** When multiple units are mixed together in the same expression, the `calc()` statement is left as is, to fallback to the [w3c calc() feature](http://www.w3.org/TR/css3-values/#calc). ## Installation -```bash -npm install postcss-calc +```console +$ npm install postcss-calc ``` ## Usage @@ -31,28 +31,62 @@ var output = postcss() .css ``` +**Example** (with [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties) enabled as well): + +```js +// dependencies +var fs = require("fs") +var postcss = require("postcss") +var customProperties = require("postcss-custom-properties") +var calc = require("postcss-calc") + +// css to be processed +var css = fs.readFileSync("input.css", "utf8") + +// process css +var output = postcss() + .use(customProperties()) + .use(calc()) + .process(css) + .css +``` + Using this `input.css`: ```css +:root { + --main-font-size: 16px; +} + +body { + font-size: var(--main-font-size); +} + h1 { - font-size: calc(16px * 2); + font-size: calc(var(--main-font-size) * 2); height: calc(100px - 2em); - width: calc(2*var(--base-width)); - margin-bottom: calc(16px * 1.5); + margin-bottom: calc( + var(--main-font-size) + * 1.5 + ) } ``` you will get: ```css +body { + font-size: 16px +} + h1 { font-size: 32px; height: calc(100px - 2em); - width: calc(2*var(--base-width)); margin-bottom: 24px } ``` -Checkout [tests] for more examples. + +Checkout [tests](src/__tests__/index.js) for more examples. ### Options @@ -69,8 +103,7 @@ var out = postcss() #### `preserve` (default: `false`) -Allow you to preserve calc() usage in output so browsers will handle decimal -precision themselves. +Allow you to preserve calc() usage in output so browsers will handle decimal precision themselves. ```js var out = postcss() @@ -122,32 +155,17 @@ div[data-size="calc(3*3)"] { --- -## Related PostCSS plugins -To replace the value of CSS custom properties at build time, try [PostCSS Custom Properties]. - ## Contributing -Work on a branch, install dev-dependencies, respect coding style & run tests -before submitting a bug fix or a feature. +Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature. -```bash -git clone git@github.com:postcss/postcss-calc.git -git checkout -b patch-1 -npm install -npm test +```console +$ git clone https://github.com/postcss/postcss-calc.git +$ git checkout -b patch-1 +$ npm install +$ npm test ``` ## [Changelog](CHANGELOG.md) ## [License](LICENSE) - -[git-img]: https://img.shields.io/badge/support-chat-blue.svg -[git-url]: https://gitter.im/postcss/postcss -[npm-img]: https://img.shields.io/npm/v/postcss-calc.svg -[npm-url]: https://www.npmjs.com/package/postcss-calc - -[PostCSS]: https://github.com/postcss -[PostCSS Calc]: https://github.com/postcss/postcss-calc -[PostCSS Custom Properties]: https://github.com/postcss/postcss-custom-properties -[tests]: src/__tests__/index.js -[W3C calc() implementation]: https://www.w3.org/TR/css3-values/#calc-notation |