PostCSS 签名函数 
npm install @csstools/postcss-sign-functions --save-dev
PostCSS 签名函数 让你使用 sign 财务报告和审定财务报表 abs 函数,在 CSS 数值 4 规格.
.sign {
z-index: sign(-10px);
}
.sign {
z-index: sign(0);
}
.sign {
z-index: sign(10px);
}
.abs {
z-index: abs(-10px);
}
.abs {
z-index: abs(0);
}
.abs {
z-index: abs(10px);
}
.abs {
z-index: abs(10%);
}
/* becomes */
.sign {
z-index: calc(-1);
}
.sign {
z-index: calc(0);
}
.sign {
z-index: calc(1);
}
.abs {
z-index: calc(10px);
}
.abs {
z-index: calc(0);
}
.abs {
z-index: calc(10px);
}
.abs {
z-index: max((10%), -1 * (10%));
}
[注] 静态回落用于
sign财务报告和审定财务报表abs有限. 最有意思的值是变量和动态值(例如含有%) (中文(简体) ). 在对客户端具有动态的值的构建过程中,不可能产生静态回落.
使用量
添加 PostCSS 签名函数 对您的项目:
npm install postcss @csstools/postcss-sign-functions --save-dev
当作一个 邮政 插件 :
const postcss = require('postcss');
const postcssSignFunctions = require('@csstools/postcss-sign-functions');
postcss([
postcssSignFunctions(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
关于自定义属性
鉴于自定义属性的动态性质,不可能知道可变值是什么,这意味着插件不能计算样式表的最终值.
因此,任何含有 var 被跳过.
选项
保护
这个 preserve 选项决定原始标记是否
被保存下来。 默认情况下,它没有被保存.
postcssSignFunctions({ preserve: true })
.sign {
z-index: sign(-10px);
}
.sign {
z-index: sign(0);
}
.sign {
z-index: sign(10px);
}
.abs {
z-index: abs(-10px);
}
.abs {
z-index: abs(0);
}
.abs {
z-index: abs(10px);
}
.abs {
z-index: abs(10%);
}
/* becomes */
.sign {
z-index: calc(-1);
z-index: sign(-10px);
}
.sign {
z-index: calc(0);
z-index: sign(0);
}
.sign {
z-index: calc(1);
z-index: sign(10px);
}
.abs {
z-index: calc(10px);
z-index: abs(-10px);
}
.abs {
z-index: calc(0);
z-index: abs(0);
}
.abs {
z-index: calc(10px);
z-index: abs(10px);
}
.abs {
z-index: max((10%), -1 * (10%));
z-index: abs(10%);
}