Scss/Sass 중첩지도에서 클래스 생성

Question

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

실제 (잘못된) 생성 된 클래스는 다음과 같습니다은 무엇 당신이 찾고있는 것은 재귀 믹스 인이다

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

Answer 1

(대신 yellow의 greenredyellow 주). 매핑을 따라 가십시오. 값이 매핑 인 경우 자체를 호출하면 속성/값이 인쇄됩니다.

$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는 특정 압축 유형에서 해당 16 진수 코드로 변환합니다.