PostCSS 指示函数

npm install @csstools/postcss-exponential-functions --save-dev

PostCSS 指示函数 让你使用 pow(), (中文(简体) ), sqrt(), (中文(简体) ), hypot(), (中文(简体) ), log(), (中文(简体) ), exp() 函数 CSS 值 4 规格。 。 。 .

.foo {
    top: calc(1px * pow(2, 3));
    line-height: sqrt(1.2);
    padding: hypot(3px, 4px);
    order: log(10, 10);
    min-height: calc(e - exp(1));
}

/* becomes */

.foo {
    top: calc(8px);
    line-height: calc(1.09545);
    padding: calc(5px);
    order: calc(1);
    min-height: calc(0);
}

使用量

添加 PostCSS 指示函数 对您的项目:

npm install postcss @csstools/postcss-exponential-functions --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssExponentialFunctions = require('@csstools/postcss-exponential-functions');

postcss([
    postcssExponentialFunctions(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

选项

保护

这个 preserve 选项决定原始标记是否 被保存下来。 默认情况下,它没有被保存.

postcssExponentialFunctions({ preserve: true })

.foo {
    top: calc(1px * pow(2, 3));
    line-height: sqrt(1.2);
    padding: hypot(3px, 4px);
    order: log(10, 10);
    min-height: calc(e - exp(1));
}

/* becomes */

.foo {
    top: calc(8px);
    top: calc(1px * pow(2, 3));
    line-height: calc(1.09545);
    line-height: sqrt(1.2);
    padding: calc(5px);
    padding: hypot(3px, 4px);
    order: calc(1);
    order: log(10, 10);
    min-height: calc(0);
    min-height: calc(e - exp(1));
}