[SCSS] 05. At-Rules -04. 사용자 정의 함수

이번 포스트에서는 사용자 정의 기능을 모둘화 해서 사용하기 위한 @function에 대해 살펴보자.

 

사용자 정의 함수의 작성

 

@function

@function은 사용자 정의의 기능을 모듈화하여 재사용하기 위한 용도로 사용된다. 기본적인 작성법은 아래와 같다.

@function <function_name> (<arguments...>) { 
 // 실행문 작성 
 @return value;
}

일반적을 sass의 @function은 함수 동작의 결과를 받아서 사용하는 용도로 많이 사용되는데 함수에서 값을 반환하는 경우는 @return을 사용한다.

@function pow($base, $exponent) {
  $result: 1;
  @for $i from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

.sidebar {
  float: left;
  margin-left: pow(4, 3) * 1px;
}

.sidebar {
  float: left;
  margin-left: 64px;
}

위 예는 pow라는 함수를 선언하고 파라미터로 $base와 $exponent를 전달 받은 후  반복문을 이용해서 $base에 대한 지수승을 구해서 반환하고 있다.

.sidebar의 margin-left에서 pow를 호출하면서 4, 3을 넘겨주고 있고 생성된 css를 상펴보면 4^3즉 64가 설정되는 것을 볼 수 있다.

 

@function의 argument

@function을 이용해서 함수를 작성할 때는 @mixin을 호출하면서 @include에서 사용했던 것과 동일한 방식으로 argument를 설정할 수 있다.

즉 @function에서 사용할 수 있는 argument 종류는 다음과 같다.

• Optional argument
• Keyword argument
• Variable(arbitary) argument