핵심 Sass | @function

Sass의 @function은 반환 값이 있는 재사용 가능한 스타일 함수를 정의하는 기능이다.
일반적인 @mixin은 스타일을 출력하지만, @function은 값을 계산해서 반환하는 것이 차이점이다.

@function을 사용하면 좋은 경우

• 색상, 크기, 간격 등의 동적인 값 계산
• 복잡한 계산을 재사용하여 코드 유지보수성 향상
• @mixin과 함께 사용하여 더 유연한 스타일 제공

---

기본 문법

@function 함수이름(매개변수...) {
  @return 반환값;
}

• @function으로 함수 정의
• @return을 사용하여 값 반환
• @include 대신 함수처럼 호출해서 사용

--

예제: px → rem 변환 함수

CSS에서 px을 rem으로 변환하는 함수를 만들 수 있다.

@function px-to-rem($px, $base: 16px) {
  @return $px / $base * 1rem;
}

body {
  font-size: px-to-rem(18px); // 18px → 1.125rem
}

h1 {
  font-size: px-to-rem(32px); // 32px → 2rem
}

• px-to-rem(32px);를 호출하면 자동으로 rem 단위로 변환됨

---

예제: 색상 밝기 조절 함수

Sass의 lighten()과 darken()을 활용하여 색상을 동적으로 조정하는 함수를 만들 수 있다.

@function shade-color($color, $amount) {
  @if (lightness($color) > 50%) {
    @return darken($color, $amount);
  } @else {
    @return lighten($color, $amount);
  }
}

.button {
  background-color: shade-color(#3498db, 10%);
}

• shade-color(#3498db, 10%)을 호출하면 자동으로 색상이 더 어두워지거나 밝아짐

---

예제: 비율 계산 함수

비율(퍼센트)을 사용해 동적으로 크기를 계산하는 함수를 만들 수 있다.

@function percentage-width($target, $container) {
  @return ($target / $container) * 100%;
}

.card {
  width: percentage-width(300px, 1200px); // 25%
}

• percentage-width(300px, 1200px);를 호출하면 자동으로 25% 반환

---

@mixin과 @function 차이점

비교 항목	@mixin	@function
반환 값	스타일 블록 출력	계산된 값 반환
호출 방식	@include mixin-name;	function-name();
사용 목적	스타일 그룹 재사용	동적인 값 계산
사용 예제	@mixin button-style {}	@function px-to-rem() {}

---

정리

• @function은 계산된 값을 반환하는 기능
• @return을 사용하여 결과 반환
• 크기 변환, 색상 조정, 비율 계산 등에 유용
• @mixin은 스타일 블록을 출력하지만, @function은 값을 반환한다는 차이점