Skip to content

README.md

Latest commit

 

History

History
81 lines (59 loc) · 2.92 KB

README.md

File metadata and controls

81 lines (59 loc) · 2.92 KB
Raw

PostCSS SQRT PostCSS

NPM Version Build Status Support Chat

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