함수.md

함수

@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;
}

→ ratio: 비율 구하는 함수

→ ratio(160, 9/16) 사용 시 16:9의 화면 비율 사용 가능

@mixin과 @function

• 둘 다 재사용 가능
• @mixin: 스타일을 다룰 때 사용
• @function: 값 처리에 대한 내용 명시할 때 사용