PostCSS 已步入值函数

npm install @csstools/postcss-stepped-value-functions --save-dev

PostCSS 已步入值函数 让您使用 round, (中文(简体) ), rem 财务报告和审定财务报表 mod 已加固的值函数,然后是 CSS 数值 4 规格.

.test-functions {
    padding: 8px mod(18px, 5px) 1px calc(rem(15px, 6px) + 50%);
    transform: rotate(mod(-140deg, -90deg));
    top: round(15px, 4px);
    right: round(nearest, 15px, 4px);
    bottom: round(up, 15px, 7px);
    left: round(down, 15px, 4px);
    width: round(to-zero, 15px, 4px);
}

/* becomes */

.test-functions {
    padding: 8px calc(3px) 1px calc(calc(3px) + 50%);
    transform: rotate(calc(-50deg));
    top: calc(16px);
    right: calc(16px);
    bottom: calc(21px);
    left: calc(12px);
    width: calc(12px);
}

使用量

添加 PostCSS 已步入值函数 对您的项目:

npm install postcss @csstools/postcss-stepped-value-functions --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssSteppedValueFunctions = require('@csstools/postcss-stepped-value-functions');

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

关于自定义属性

鉴于自定义属性的动态性质,不可能知道可变值是什么,这意味着插件不能计算样式表的最终值.

因此,任何含有 var 被跳过.

选项

保护

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

postcssSteppedValueFunctions({ preserve: true })

.test-functions {
    padding: 8px mod(18px, 5px) 1px calc(rem(15px, 6px) + 50%);
    transform: rotate(mod(-140deg, -90deg));
    top: round(15px, 4px);
    right: round(nearest, 15px, 4px);
    bottom: round(up, 15px, 7px);
    left: round(down, 15px, 4px);
    width: round(to-zero, 15px, 4px);
}

/* becomes */

.test-functions {
    padding: 8px calc(3px) 1px calc(calc(3px) + 50%);
    padding: 8px mod(18px, 5px) 1px calc(rem(15px, 6px) + 50%);
    transform: rotate(calc(-50deg));
    transform: rotate(mod(-140deg, -90deg));
    top: calc(16px);
    top: round(15px, 4px);
    right: calc(16px);
    right: round(nearest, 15px, 4px);
    bottom: calc(21px);
    bottom: round(up, 15px, 7px);
    left: calc(12px);
    left: round(down, 15px, 4px);
    width: calc(12px);
    width: round(to-zero, 15px, 4px);
}