postcss-sqrt v1.0.1

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.

: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:

Options

...