从Scss/Sass嵌套映射生成类

如何为Scss/Sass映射中具有单个值的每个键生成类列表

例如，从这个Scss映射（忽略嵌套的命名约定，这将用于许多不同用途的映射）：

（见Codepen:（谢谢cimmanon！））

-

…要生成的所需类：

.u-fg__brown { color: hsl(33,35,50) }
.u-fg__blue { color: hsl(207,80,50) }

.u-fg__green0 { color: hsl(157,65,65) }
.u-fg__green1 { color: hsl(157,50,50) }
.u-fg__greenalt0 { color: hsl(125,65,65) }

.u-fg__red0 { color: hsl(0,60,50) }
.u-fg__redalt0 { color: hsl(0,100,50) }

.u-fg__yellow0 { color: hsl(50,100,60) }
.u-fg__yellow1 { color: hsl(50,100,80) }

实际（不正确）生成的类是：（注意

greenredyellow

，而不仅仅是

yellow

）

---

你要找的是一个递归的mixin。浏览地图。如果值是映射，则调用自身，否则打印出属性/值

$palette: (
  'brown': hsl( 33,  35,  50),
  'blue': hsl(207, 80,  50),

  'green': (
    0: hsl(157, 65, 65),
    1: hsl(157, 50, 50),
    alt: (
      0: hsl(125, 65, 65),
    ),
  ),

  'red': (
    0: hsl(0, 60, 50),
    alt: (
      0: hsl(0, 100, 50),
    ),
  ),

  'yellow': (
    0: hsl(50, 100, 60),
    2: hsl(50, 100, 100),
  ),
);


@mixin map-to-class($map, $property, $sel, $divider: '') {
    $sel: if($sel == '' and &, &, $sel);
    @debug $sel;

    #{$sel} {
        @each $k, $v in $map {
            @at-root #{$sel}#{$divider}#{$k} {
                @if type-of($v) == map {
                    @include map-to-class($v, $property, '', $divider) {
                        @content;
                    }
                } @else {
                    #{$property}: $v;
                }
            }
        }
    }
}

@include map-to-class($palette, color, '.u-fg__', '');

输出：

/* line 33, ../sass/test.scss */
.u-fg__brown {
  color: #ac8453;
}
/* line 33, ../sass/test.scss */
.u-fg__blue {
  color: #198ae6;
}
/* line 33, ../sass/test.scss */
.u-fg__green0 {
  color: #6ce0b3;
}
/* line 33, ../sass/test.scss */
.u-fg__green1 {
  color: #40bf8e;
}
/* line 33, ../sass/test.scss */
.u-fg__greenalt0 {
  color: #6ce075;
}
/* line 33, ../sass/test.scss */
.u-fg__red0 {
  color: #cc3333;
}
/* line 33, ../sass/test.scss */
.u-fg__redalt0 {
  color: red;
}
/* line 33, ../sass/test.scss */
.u-fg__yellow0 {
  color: #ffdd33;
}
/* line 33, ../sass/test.scss */
.u-fg__yellow2 {
  color: white;
}

---

请注意，我引用了您的映射键名称。在某些压缩类型下，Sass会将它们转换为等价的十六进制代码。

这里有问题吗？你试过什么吗？我试过使用map get deep函数，但它很混乱-希望有人能推荐一种替代方法。非常感谢。非常感谢您的详细回复！向上投票。今天晚些时候我将对它进行更多的研究。我基本上符合我的目的，但是在多个嵌套列表中存在一个问题，其中前面的每个兄弟嵌套列表键都在生成的类名之前。与之斗争了相当一段时间，但还是无法解决。在这里查看：您能告诉我生成的CSS应该是什么样子吗？不太清楚-上面的结果在类中，如：

.u-fg\uuuuu-green.u-fg\uuuu-green.u-fg\uuu-greenalt0{color:#6ce075；}

，如下所示：。继续努力。哎哟，我做了一个小小的改变，我认为它会产生同样的结果。现在应该可以工作了。

... (brown, blue, and green are fine) ...
.u-fg__green0 { color: hsl(157,65,65) }
.u-fg__green1 { color: hsl(157,50,50) }
.u-fg__greenalt0 { color: hsl(125,65,65) }

.u-fg__greenred0 { color: hsl(0,60,50) }
.u-fg__greenredalt0 { color: hsl(0,100,50) }

.u-fg__greenredyellow0 { color: hsl(50,100,60) }
.u-fg__greenredyellow1 { color: hsl(50,100,80) }

$palette: (
  'brown': hsl( 33,  35,  50),
  'blue': hsl(207, 80,  50),

  'green': (
    0: hsl(157, 65, 65),
    1: hsl(157, 50, 50),
    alt: (
      0: hsl(125, 65, 65),
    ),
  ),

  'red': (
    0: hsl(0, 60, 50),
    alt: (
      0: hsl(0, 100, 50),
    ),
  ),

  'yellow': (
    0: hsl(50, 100, 60),
    2: hsl(50, 100, 100),
  ),
);


@mixin map-to-class($map, $property, $sel, $divider: '') {
    $sel: if($sel == '' and &, &, $sel);
    @debug $sel;

    #{$sel} {
        @each $k, $v in $map {
            @at-root #{$sel}#{$divider}#{$k} {
                @if type-of($v) == map {
                    @include map-to-class($v, $property, '', $divider) {
                        @content;
                    }
                } @else {
                    #{$property}: $v;
                }
            }
        }
    }
}

@include map-to-class($palette, color, '.u-fg__', '');

/* line 33, ../sass/test.scss */
.u-fg__brown {
  color: #ac8453;
}
/* line 33, ../sass/test.scss */
.u-fg__blue {
  color: #198ae6;
}
/* line 33, ../sass/test.scss */
.u-fg__green0 {
  color: #6ce0b3;
}
/* line 33, ../sass/test.scss */
.u-fg__green1 {
  color: #40bf8e;
}
/* line 33, ../sass/test.scss */
.u-fg__greenalt0 {
  color: #6ce075;
}
/* line 33, ../sass/test.scss */
.u-fg__red0 {
  color: #cc3333;
}
/* line 33, ../sass/test.scss */
.u-fg__redalt0 {
  color: red;
}
/* line 33, ../sass/test.scss */
.u-fg__yellow0 {
  color: #ffdd33;
}
/* line 33, ../sass/test.scss */
.u-fg__yellow2 {
  color: white;
}