SASS의 함수

이번 강의에서는 함수를 사용하는 방법을 살펴보겠습니다. 함수는 믹스인과 다소 유사하지만, 값을 변경할 수 있는 매개변수를 추가할 수 있다는 점이 다릅니다.

글꼴 크기를 설정하는 func 함수를 만들어 봅시다. 크기는 매개변수로 전달되도록 하고, 매개변수로는 변수가 사용되도록 합시다:

styles.scss$font-size: 10px;

그런 다음 함수에 $n 매개변수를 작성하고 함수 본문에 반드시 @return을 지정합니다:

styles.scss@function func($n) {
  @return $n * $font-size;
}
#main {
  font-size: func(2);
}

컴파일 결과:

styles.css#main {
  font-size: 20px;
}

함수에 명명된 인수도 전달할 수 있습니다. 이전 예제의 조건을 다시 작성해 보겠습니다:

styles.scss@function func($n) {
  @return $n * $font-size;
}
#main {
  font-size: func($n: 2);
}

그리고 styles.css 파일에서 동일한 코드를 볼 수 있습니다:

styles.css#main {
  font-size: 20px;
}

styles.scss$size: 10px;
@function func($num) {
  @return $num + $size;
}
div {
  font-size: func(4);
}

styles.scss$size: 4px;
@function func($num) {
  @return $num + $size;
}
.card {
  padding: func(2);
  margin: func(6);
  width: func(416);
}

styles.scss$size: 2px;

@function func($num) {
  @return ($num * $size) + 20;
}

.logo {
  width: func(2);
  height: func(4);
}