[SCSS] 다중 변수 선언 get-map() 함수 사용하기

개념

SCSS에서 변수는 $변수명: 값의 형태로 간단히 선언할 수 있다. 또한, 당연히 1개의 변수에 1개의 값만 저장할 수 있었다.

하지만, get-map() 내장 함수를 사용하면 1개의 변수에 여러 개의 값을 선언할 수 있다. 마치, 자바스크립트의 배열이나 객체처럼 말이다.

 

방법

$color: (
    primary: #333,
    secondary: #666,
    focus: #ff0000
);

body {
    color: get-map($color, primary);
}

h1 {
    color: get-map($color, focus);
}

먼저, 변수를 선언하는 방법은 $변수명: (변수1: 값1, 변수2: 값2...)의 형식으로 선언해주면 된다. 참고로 변수를 선언할 때 주의할 점은 중괄호{}가 아닌 소괄호()라는 점과 변수 선언 후에는 반드시 뒤에 세미콜론(;)을 넣어줘야 한다는 점이다. 선언한 변수는 get-map(변수명, 불러올 변수 이름)으로 간단히 불러올 수 있다.

 

1. $변수명: (값1, 값2, 값3..)처럼 소괄호로 묶을 수 있고, 값에는 또 다른 변수를 넣을 수 있다.
2. 불러올 때는 get-map(변수명, 값)으로 불러올 수 있다.