从Scss / Sass嵌套地图生成类

843

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

例如，从此Scss地图（忽略嵌套命名约定，这将用于许多用途各异的地图）：

（请参阅Codepen：http：//codepen.io/harlanlewis/pen/emWVrr（感谢cimmanon！））

$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),
    1: hsl(50,100,100),
  ),
};

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

    @each $key, $value in $map {
        @if type-of($value) == map {
            $selector: selector-append($selector, #{$key});
            @include map-to-class($value, $selector, $property) {
                @content;
            }
        } @else {
          @at-root #{$selector}#{$key} {
                #{$property}: $value;
            };
        };
    };
};
@include map-to-class($palette, '.u-fg__', 'color')

...希望生成的类：

.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）

... (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) }

西曼侬

您正在寻找的是递归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;
}