后CSS 混音符

npm install @csstools/postcss-mixins --save-dev

后CSS 混音符 让您使用 @mixin 财务报告和审定财务报表 @apply 如下 CSS 混合剂 1。 。 。 .

CSS Mixins的几个规格方面仍有待解决.
此插件只是部分执行,以避免与最终规格相冲突.

不支持 :

• 键入混合参数
• 分层 @mixin 声明
• 混合覆盖

@mixin --foo() {
    color: green;
}

.foo {
    @apply --foo;
}

@mixin --bar(--baz) {
    color: rgb(var(--baz) 127 0);
}

.bar {
    @apply --bar(200);
}

@mixin --a {
    font-weight: 500;
}

@mixin --b {
    @apply --a;
    font-size: 2rem;
}

.c {
    @apply --b;
}

/* becomes */

.foo {
    color: green;
}

.bar {
    --_csstools-p-1agle9gi-0--arg-0: 200;
    --_csstools-p-1agle9gi-1--baz: var(--_csstools-p-1agle9gi-0--arg-0);
    color: rgb(var(--_csstools-p-1agle9gi-1--baz) 127 0);
}

.c {
    font-weight: 500;
    font-size: 2rem;
}

使用量

添加 后CSS 混音符 对您的项目:

npm install postcss @csstools/postcss-mixins --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssMixins = require('@csstools/postcss-mixins');

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

选项

保护

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

postcssMixins({ preserve: true })

@mixin --foo() {
    color: green;
}

.foo {
    @apply --foo;
}

@mixin --bar(--baz) {
    color: rgb(var(--baz) 127 0);
}

.bar {
    @apply --bar(200);
}

@mixin --a {
    font-weight: 500;
}

@mixin --b {
    @apply --a;
    font-size: 2rem;
}

.c {
    @apply --b;
}

/* becomes */

@mixin --foo() {
    color: green;
}

.foo {
    color: green;
    @apply --foo;
}

@mixin --bar(--baz) {
    color: rgb(var(--baz) 127 0);
}

.bar {
    --_csstools-p-1agle9gi-0--arg-0: 200;
    --_csstools-p-1agle9gi-1--baz: var(--_csstools-p-1agle9gi-0--arg-0);
    color: rgb(var(--_csstools-p-1agle9gi-1--baz) 127 0);
    @apply --bar(200);
}

@mixin --a {
    font-weight: 500;
}

@mixin --b {
    @apply --a;
    font-size: 2rem;
}

.c {
    font-weight: 500;
    font-size: 2rem;
    @apply --b;
}