PostCSS 自定义函数

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

PostCSS 自定义函数 让您使用 @function 以下自定义函数 CSS 自定义函数和混合函数 1。 。 。 .

自定义函数仍然是早期的草稿 .
此插件只是部分执行,以避免与最终规格相冲突.

不支持 :

• 无默认值的输入参数
• 返回默认以外的类型 type(*)
• @function 内部定义 @container 或者说 @scope
• @function 定义a @layer 这本身属于有条件的集团规则
• @function 样式规则中的定义
• 除声明和有条件的集团规则外,其主体包含其他任何内容的定义
• result 通过有条件的规则或规则解决全CSS关键字的描述符 var() 倒计时
• 确认输入的默认值与其参数类型相符

内部定义 @layer, (中文(简体) ), @media 财务报告和审定财务报表 @supports 被支持。 当一个名字 有几种活性定义,浏览器级联选择最强的定义.

不支持的定义留为正数 。 定义仅在每次 呼叫站点是由此插件所转换的, 因此调用站点被保留为 内部示例 @keyframes 或嵌入式有条件声明) 定义.

支持带有默认值的非类型参数,并可能使用任何值, 包括相对单位和 var() 参考文献.

默认值的输入参数由浏览器通过一个 生成 @property 登记。 默认值不是 计算独立(例如 1em 或者说 var(--x)无法使用) 作为 initial-value ,使函数不支持.

@function --negative(--value) {
    result: calc(-1 * var(--value));
}

@function --double(--value <length>: 1px) {
    result: calc(2 * var(--value));
}

html {
    --gap: 1em;
    padding: --negative(var(--gap));
    margin: --double(4px);
}

/* becomes */

html {
    --gap: 1em;
    --_csstools-cf-1gice1e-1-arg-0: var(--gap);
    --_csstools-cf-1gice1e-0-result: calc(-1 * var(--_csstools-cf-1gice1e-1-arg-0));
    padding: var(--_csstools-cf-1gice1e-0-result);
    --_csstools-cf-1gice1e-3-arg-0: 4px;
    --_csstools-cf-1gice1e-2-result: calc(2 * var(--_csstools-cf-1gice1e-3-arg-0));
    margin: var(--_csstools-cf-1gice1e-2-result);
}
@property --_csstools-cf-1gice1e-3-arg-0 {
    syntax: "<length>";
    inherits: false;
    initial-value: 1px;
}

使用量

添加 PostCSS 自定义函数 对您的项目:

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

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssCustomFunctions = require('@csstools/postcss-custom-functions');

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

选项

保护

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

postcssCustomFunctions({ preserve: true })

@function --negative(--value) {
    result: calc(-1 * var(--value));
}

@function --double(--value <length>: 1px) {
    result: calc(2 * var(--value));
}

html {
    --gap: 1em;
    padding: --negative(var(--gap));
    margin: --double(4px);
}

/* becomes */

@function --negative(--value) {
    result: calc(-1 * var(--value));
}

@function --double(--value <length>: 1px) {
    result: calc(2 * var(--value));
}

html {
    --gap: 1em;
    --_csstools-cf-1gice1e-1-arg-0: var(--gap);
    --_csstools-cf-1gice1e-0-result: calc(-1 * var(--_csstools-cf-1gice1e-1-arg-0));
    padding: var(--_csstools-cf-1gice1e-0-result);
    padding: --negative(var(--gap));
    --_csstools-cf-1gice1e-3-arg-0: 4px;
    --_csstools-cf-1gice1e-2-result: calc(2 * var(--_csstools-cf-1gice1e-3-arg-0));
    margin: var(--_csstools-cf-1gice1e-2-result);
    margin: --double(4px);
}

@property --_csstools-cf-1gice1e-3-arg-0 {
    syntax: "<length>";
    inherits: false;
    initial-value: 1px;
}