SCSS & SASS - 함수

01.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

.box {
  width: 160px;
  height: 90px; // (160px * 9/16)
  display: flex;
  justify-content: center;
  align-items: center;
}