Sass 연습 - @function 와 @return

 

Sass 첫 경험! CSS를 더 가독성 있게, 반복되는 작업들을 줄여줄 수 있도록 효율성을 올리기 위해 사용한다고 한다.

그 중 배웠던 기능 한가지를 정리한다.

 

---

변수에 여러가지 색깔 넣어주기

 

$colors: (
  primary: #005dff,
  accent: #fff6bb,
);

 .background {
    background-color: map-get($colors, primary);
  }
 

잘 불러와졌다.

 

---

function과 return 사용해보기

 

 

그런데 보다시피 편하자고 사용하는 Sass에서 map-get($map 이름, key값) 이라는 긴 값을 넣고있는건 비효율적이다.

그래서 funtion과 return을 사용해 이 색깔 불러오는 일을 효율적으로 만들어보자.

 

 
@function color($color-name) {
  @return map-get($colors, $color-name);
}

여기서 $colors는 바로 위 보이는 것 처럼 우리가 여러 색을 넣어주었던 map이고,

그 안에 내가 $color-name으로 이름붙인 여러 키값 중 하나를 불러와주면 키값에 맞는 색깔이 불러와진다.

 

 

 

백번 말로 설명하면 어려우니 직접 해보자.

  .background {
    background-color: color(primary);
  }

아래와 같이 기존의 map-get 구문 대신에

우리가 지정한 기능인 color(primary)를 사용해주었고

이는 @return 되어 맨 처음 사용했던 background-color: map-get($colors, primary); 와 같은 결과를 내게 된 것이다.

 

짠!

 

---

변수명은 당연히 짓기 나름이니 한번 변경해서 적용해보았다.

$colors: (
  primary: #005dff,
  accent: #fff6bb,
);
 
@function chooseone($name) {
  @return map-get($colors, $name);
}
 
.background {
    background-color: chooseone(primary);
  }
 

여전히 잘 적용된다.

 

 

---

사실 이 기능들은 말로만 들어서는 아리까리하고 계속적으로 반복해서 익숙하게 만드는 편이 낫다는 결론이다.

내가 아직 자바스크립트를 시작하지 않아서 변수를 사용하는 기능에 문외한이라 더 그런 듯 하다!