SCSS - 함수

SCSS 에서 함수기능을 지원한다.

반환된 값을 사용

 

예시

// 재활용 선언
@mixin center {
    display: flex;
    justify-center: center;
    align-items: center;
}

// 함수 선언
@function ratio($size, $ratio){
    @return $size * $ratio;
}

.box {
    // 변수 선언
    $width: 100px;
    // 변수 사용
    width: $width;
    // 함수 사용
    height: ratio($width, 1/2);
    // 재활용 사용
    @include center;
}