PostCSS 随机函数

npm install @csstools/postcss-random-function --save-dev

PostCSS 随机函数 让你使用 random 函数,在 CSS 值 5 规格.

div {
    color: oklch(0.7 0.2 random(120deg, 240deg));
}

div {
    color: oklch(0.7 0.2 random(120deg, 240deg, 7deg));
}

div {
    margin: random(10px, 100px) random(10px, 100px);
    padding: random(--padding, 10px, 100px) random(--padding, 10px, 100px);
}

/* becomes */

div {
    color: oklch(0.7 0.2 calc(166.80407deg));
}

div {
    color: oklch(0.7 0.2 calc(169deg));
}

div {
    margin: calc(45.10305px) calc(45.10305px);
    padding: calc(73.36206px) calc(73.36206px);
}

[注] 生成值是确定性的伪随机数. 用相同的输入两次生成值会给出相同的结果. CSS源文件的输入长度被用作随机种子.

使用量

添加 PostCSS 随机函数 对您的项目:

npm install postcss @csstools/postcss-random-function --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssRandomFunction = require('@csstools/postcss-random-function');

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

关于自定义属性

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

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

选项

保护

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

postcssRandomFunction({ preserve: true })

div {
    color: oklch(0.7 0.2 random(120deg, 240deg));
}

div {
    color: oklch(0.7 0.2 random(120deg, 240deg, 7deg));
}

div {
    margin: random(10px, 100px) random(10px, 100px);
    padding: random(--padding, 10px, 100px) random(--padding, 10px, 100px);
}

/* becomes */

div {
    color: oklch(0.7 0.2 calc(166.80407deg));
    color: oklch(0.7 0.2 random(120deg, 240deg));
}

div {
    color: oklch(0.7 0.2 calc(169deg));
    color: oklch(0.7 0.2 random(120deg, 240deg, 7deg));
}

div {
    margin: calc(45.10305px) calc(45.10305px);
    margin: random(10px, 100px) random(10px, 100px);
    padding: calc(73.36206px) calc(73.36206px);
    padding: random(--padding, 10px, 100px) random(--padding, 10px, 100px);
}