SCSS 함수

SCSS 함수

SCSS에서 @mixin을 이용하여 함수와 유사하게 사용하는 방법도 있지만 실제로 @function을 SCSS 내에서 JavaScript 함수와 동일한 구조로 활용할 수 있습니다.

따라서, @mixin은 CSS의 style을 다루는 데에 주로 사용이 된다면, @function은 어떠한 값을 명시하는 데에 사용할 수 있습니다. 아래의 예시처럼 두 가지를 구분하여 사용하는 방법에 익숙해져야 합니다.

1. SCSS

@mixin center {
    display: flex;
    justify-content: center;
    align-items: center;
}

@function ratio($size, $ratio) {
    @return $size * $ratio
}

.box {
    $width: 160px;
    width: $width;
    height: ratio($width, 9/16);
    @include center;
}

2. CSS(Compiled)

.box {
  width: 160px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
}