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