PostCSS使用Mixins动态生成类

问题描述

我正在尝试使用类似@mixin generateTextColourClasses gray,--gray,3;

的东西动态生成一堆类

会产生以下结果

.text-gray-100 {
    color: var(--gray-100);
}

.text-gray-200 {
    color: var(--gray-200);
}

.text-gray-300 {
    color: var(--gray-300);
}

我有以下代码，这是一个自定义js mixin，定义为

    'postcss-mixins': {
      mixins: {
        generateTextColourClasses: function (mixin,name,variable,step) {
          for (let i = 1; i < step; i++) {
            var rule = postcss.rule({ selector: '.text-' + name + '-' + i + '00' });
            rule.append({
              prop: 'color',value: 'var(' + variable + '-' + i + '00)'
            })
            mixin.append(rule)
          }
        }
      }
    },

但是，生成的css文件中没有任何类。我怀疑它的最后一部分mixin.append(rule)，但是我无法使用http://api.postcss.org/AtRule.html

找到正确的解决方案

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）