PostCSS SQRT lets you calculate the square root of something dynamically in CSS. Sometimes this is useful if your design relies on CSS variables which change dynamically, like changing variables at different breakpoints.
Update: sqrt()
might finally be coming to CSS with trigonometric functions. Yay!
:root {
--number: 7200;
}
.example {
width: calc(50% - (sqrt(var(--number)) * 1px));
}
/* becomes */
:root {
--number: 7200;
}
.test {
--guess01: calc((var(--number) + ( var(--number) / var(--number))) / 2);
--guess02: calc((var(--guess01) + ( var(--number) / var(--guess01))) / 2);
--guess03: calc((var(--guess02) + ( var(--number) / var(--guess02))) / 2);
--guess04: calc((var(--guess03) + ( var(--number) / var(--guess03))) / 2);
--guess05: calc((var(--guess04) + ( var(--number) / var(--guess04))) / 2);
--guess06: calc((var(--guess05) + ( var(--number) / var(--guess05))) / 2);
--guess07: calc((var(--guess06) + ( var(--number) / var(--guess06))) / 2);
--guess08: calc((var(--guess07) + ( var(--number) / var(--guess07))) / 2);
--guess09: calc((var(--guess08) + ( var(--number) / var(--guess08))) / 2);
width: calc(50% - (calc((var(--guess09) + ( var(--number) / var(--guess09))) / 2) * 1px));
}
Add PostCSS SQRT to your project:
npm install postcss-sqrt --save-dev
Use PostCSS SQRT to process your CSS:
const postcssSqrt = require('postcss-sqrt');
postcssSqrt.process(YOUR_CSS /*, processOptions, pluginOptions */);
Or use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssSqrt = require('postcss-sqrt');
postcss([
postcssSqrt(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
PostCSS SQRT runs in all Node environments, with special instructions for:
Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt |
---|