source: frontend/node_modules/postcss-clamp/README.md

Last change on this file was 9af201e, checked in by MBK <marija.karapandzova@…>, 11 days ago

Fix frontend appearance

  • Property mode set to 100644
File size: 2.3 KB
Line 
1# PostCSS Clamp
2[![Build Status][ci-img]][ci] [![codecov.io][cov-img]][cov]
3
4[PostCSS] plugin to transform `clamp()` to combination of `min/max`.
5
6[PostCSS]: https://github.com/postcss/postcss
7[ci-img]: https://travis-ci.com/polemius/postcss-clamp.svg?branch=master
8[ci]: https://travis-ci.com/polemius/postcss-clamp
9[cov-img]: https://codecov.io/github/polemius/postcss-clamp/coverage.svg?branch=master
10[cov]: https://codecov.io/github/polemius/postcss-clamp?branch=master
11
12This plugin transform this css:
13
14```css
15.foo {
16 width: clamp(10px, 4em, 80px);
17}
18```
19
20into this:
21
22```css
23.foo {
24 width: max(10px, min(4em, 80px));
25}
26```
27
28Or with enabled options `precalculate`:
29
30```css
31.foo {
32 width: clamp(10em, 4px, 10px);
33}
34
35/* becomes */
36
37.foo {
38 width: max(10em, 14px);
39}
40```
41
42[!['Can I use' table](https://caniuse.bitsofco.de/image/css-math-functions.png)](https://caniuse.com/#feat=css-math-functions)
43
44## Instalation
45
46```bash
47$ npm install postcss postcss-clamp --save-dev
48or
49$ yarn add --dev postcss postcss-clamp
50```
51
52## Usage
53
54Use [PostCSS Clamp] as a [PostCSS] plugin:
55
56```js
57const postcss = require('postcss');
58const postcssClamp = require('postcss-clamp');
59
60postcss([
61 postcssClamp(/* pluginOptions */)
62]).process(YOUR_CSS /*, processOptions */);
63```
64
65[PostCSS Clamp] runs in all Node environments, with special instructions for:
66
67| [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) |
68| --- | --- | --- | --- | --- | --- |
69
70See [PostCSS] docs for examples for your environment.
71
72## Options
73
74### precalculate
75
76The `precalculate` option determines whether values with the same unit
77should be precalculated. By default, these are not precalculation.
78
79```js
80postcssColorHexAlpha({
81 precalculate: true
82});
83```
84
85The second and third value has the same unit (`px`):
86
87```css
88.foo {
89 width: clamp(10em, 4px, 10px);
90}
91
92/* becomes */
93
94.foo {
95 width: max(10em, 14px);
96}
97```
98
99Here all values have the same unit:
100
101```css
102.foo {
103 width: clamp(10px, 4px, 10px);
104}
105
106/* becomes */
107
108.foo {
109 width: 24px;
110}
111```
112
113## LICENSE
114
115See [LICENSE](LICENSE)
116
117[PostCSS]: https://github.com/postcss/postcss
118[PostCSS Clamp]: https://github.com/polemius/postcss-clamp
Note: See TracBrowser for help on using the repository browser.