是否可以在SASS中创建规则工厂?
我最近开始着手将一些旧样式表迁移到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
@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刚刚添加了一个例子。