postcss-sqrt

1.0.1 • Public • Published

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.

: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

Options

...

Package Sidebar

Install

npm i postcss-sqrt

Weekly Downloads

0

Version

1.0.1

License

CC0-1.0

Unpacked Size

22 kB

Total Files

8

Last publish

Collaborators

  • limitlessloop