Hangun's World – Blog

SCSS MAP.SET() 에러

작성자

Hangun’s World

카테고리:

아~~~ 별거 아닌 거 가지고 시간 낭비했네요.
API 문서에도 제대로 설명이 안되어 있어서… ㅠㅠ

@use "sass:map";
$fonts:(
    font-size: 1.3rem,
    line-height: 1.8rem
);
map.set($fonts, color, #ccc);

위와 같이 map.set()을 사용하면 이런 에러가 발생합니다.

Error: expected "{".

map.set()은 새로운 맵을 리턴하기 때문에 할당을 해주지 않아서 문법오류가 발생하는 것입니다.
아래와 같이 변수에 재 할당을 해주면 오류가 해결됩니다.

@use "sass:map";
$fonts:(
    font-size: 1.3rem,
    line-height: 1.8rem
);
$fonts: map.set($fonts, color, #ccc);

뭐 어려운 것도 아니고, 이런 걸 만들라고 한건데…

@use "sass:meta";
@use "sass:map";

$font-style:(
  10 : (font-size:1.0rem, line-height:1.6rem),
  12 : (font-size:1.2rem, line-height:1.8rem),
  14 : (font-size:1.4rem, line-height:2.2rem)
);
@mixin fontStyle($size, $args...){
  $map : map.get($font-style, $size);

  @each $k, $v in meta.keywords($args){
    $map : map.set($map, $k, $v);
  }

  @each $k, $v in $map{
      #{$k} : #{$v};
  }
}

.test10{
    @include fontStyle(10);
}
.test12{
    @include fontStyle(12);
}
.test12-2{
    @include fontStyle(12, $line-height: 2rem);
}
.test14{
    @include fontStyle(14, $line-height: 3rem, $color:#ccc, $font-weight: 700);
}
.test10 {
  font-size: 1rem;
  line-height: 1.6rem;
}

.test12 {
  font-size: 1.2rem;
  line-height: 1.8rem;
}

.test12-2 {
  font-size: 1.2rem;
  line-height: 2rem;
}

.test14 {
  font-size: 1.4rem;
  line-height: 3rem;
  color: #ccc;
  font-weight: 700;
}

더 많은 게시물