Sass[SCSS] 기초 이론 6 - 다중 변수 선언, 내장 함수(map-get)

Sass[Scss]

 

Sass[SCSS] 기초 6 - 다중 변수 선언, 내장 함수(multiple variable, map-get) 를 알아보도록 할게요.

변수를 선언할때도 한가지 값이 아닌 배열이나 객체와 같이 여러개의 값을 하나의 변수에 지정해줄 수 있습니다.

사용방법은 아래와 같은데 어렵지 않습니다.

/* 다중 변수 선언 */
$color: (
  red: rgb(241, 72, 72),
  blue: rgb(49, 102, 247),
  skin: antiquewhite
);

/* map-get(변수명, 변수키값) */
.sub-title {
  background-color: map-get($color, skin);
  color: map-get($color, red);
}
.description {
  background-color: map-get($color, skin);
  color: map-get($color, blue);
}

적용된 화면

 

---

 

다른 사용 예시도 하나 더 살펴보도록 하겠습니다.

@import 'font';

/* 다중 변수 선언 */
$lang: (
  kor: 'Noto Serif KR',
  eng: 'Dosis'
);

/* map-get(변수명, 변수키값) */
.sub-title {
  font-family: map-get($lang, kor);
}
.description {
  font-family: map-get($lang, eng);
}

적용된 화면

font.scss 파일에는 'Noto Serif KR' 한글폰트와 'Dosis' 영문폰트를 불러오고 있습니다.

$lang 이라는 다중 변수를 선언해주고 .sub-title과 .description 에 각각 한글, 영문으로 다르게 적용해주었습니다.

 

이런 사용방식 말고도 다양하게 응용하여 사용할 수 있는 유용한 기능입니다. :)