是否可以在SASS中创建规则工厂?

是否可以在SASS中创建规则工厂?,sass,Sass,我最近开始着手将一些旧样式表迁移到SASS中。我对语法很陌生,我想尽可能地利用它。我很好奇这样的事情是可能的 @function colorRuleFactory($prefix, $attribute, $named-colors){ @each $named-color in $named-colors{ createRule($attribute, $named-colors[$named-color], $name=$prefix + '-' + $named-c

我最近开始着手将一些旧样式表迁移到SASS中。我对语法很陌生,我想尽可能地利用它。我很好奇这样的事情是可能的

@function colorRuleFactory($prefix, $attribute, $named-colors){
    @each $named-color in $named-colors{
        createRule($attribute, $named-colors[$named-color], $name=$prefix + '-' + $named-color);
    }
}
函数调用示例:

colorRuleFactory('bk', 'background', $named-colors);
编译输出的示例:

 /* $ColorNameA: #000000;
    $ColorNameB: #111111;
    $ColorNameC: #222222;
 */

.bk-ColorNameA {
    background: #000000; 
 }

.bk-ColorNameB{
    background: #111111;
 }

.bk-ColorNameC{
    background: #222222;
}

要想做你想做的事,你可以使用如下方法:

$named-colors: (
   ColorNameA: #000000,
   ColorNameB: #111111,
   ColorNameC: #222222
);

@mixin colorRuleFactory($prefix, $attribute, $named-colors) {
    @each $named-color, $color in $named-colors {
        .#{$prefix}-#{$named-color} {
            #{$attribute}: $color;
        }
    }
}

@include colorRuleFactory('bk', 'background', $named-colors);
如果要在另一个mixin中分离规则创建:

@mixin createRule($attribute, $value, $name) {
    .#{$name} {
        #{$attribute}: $value;
    }
}

@mixin colorRuleFactory($prefix, $attribute, $named-colors) {
    @each $named-color, $color in $named-colors {
        @include createRule($attribute, $color, $prefix + '-' + $named-color);
    }
}

你能给出一个输入和期望输出(编译)的例子吗?@Arkellys刚刚添加了一个例子。