PostCSS SQRT

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));
}

Usage

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