diff --git a/README.md b/README.md index 9cd9252..2c20740 100755 --- a/README.md +++ b/README.md @@ -1,12 +1,9 @@ # PostCSS Calc [PostCSS][PostCSS] [![NPM Version][npm-img]][npm-url] -[![Build Status][cli-img]][cli-url] [![Support Chat][git-img]][git-url] -[PostCSS Calc] lets you reduce `calc()` references whenever it's possible. This -can be particularly useful with the [PostCSS Custom Properties] plugin. - +[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]. @@ -34,61 +31,27 @@ var output = postcss() .css ``` -**Example** (with [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(var(--main-font-size) * 2); + font-size: calc(16px * 2); height: calc(100px - 2em); - margin-bottom: calc( - var(--main-font-size) - * 1.5 - ) + width: calc(2*var(--base-width)); + margin-bottom: calc(16px * 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. ### Options @@ -159,6 +122,9 @@ 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 @@ -175,8 +141,6 @@ npm test ## [License](LICENSE) -[cli-img]: https://img.shields.io/travis/postcss/postcss-calc/master.svg -[cli-url]: https://travis-ci.org/postcss/postcss-calc [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