List 와 map 의 차이

List는 하나의 변수에 여러값을 담을수 있다.

each문으로 출력한다.

@mixin List_Test($property, $value) {
    $prefixes: webkit, moz, ms, o;
    @each $prefix in $prefixes {
        #{'-' + $prefix + '-' + $property}: $value;
    }
    // 기본
    #{$property}: $value;
}

Map 은 key와 value 가 세트다. json 형태로 생각하면 된다.

$Map_test :(
    "인사":"hello",
    color:#000,
    "margin":"20px"
);
@each $name, $val in $Map_test {
    .map_test {
      #{$name} : $val; 
    }
}

scss -> css 빌드

.map_test {
  인사: "hello";
}
.map_test {
  color: #000;
}
.map_test {
  margin: "20px";
}

MAP 2개 이상 사용시

기본은 기본값이 있고, 그외의 값 사용시 따른값 출력한다

$Map_test :(
    first : (
        "인사":"hello",
        color:#000,
        "구매":"레몬"
    ),
    second:(
        "인사":"안녕",
        color:red,
        "구매":"딸기"
    )
);

@function mapFunc($key,$type:"first"){
    @each $name, $val in map-get($Map_test,$type){
      @if($key == $name){
        @return $val;
      }
    }
}

@mixin map-test($property,$type){
    #{$property}: mapFunc($type);
    @at-root body & .abc .edf & &{ // & 는 
        #{$property}: mapFunc($type,second);
    }
}

.MAP_TEST{
    @include map-test(color,"구매")
}