SCSS(함수)

함수

@mixin 같은 경우는 우리가 알고있는 CSS 코드의 모음을 재활하는 것이고 @function 은 어떤 값을 연산해서 반환된 결과로 사용하기 위해 만들어내는 것이다.

SCSS

유튜브 화면 비율(16:9) 계산 함수

@mixin center {
    display: flax;
    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;
}