[SCSS] SCSS Mixin과 함수 활용

SCSS는 Mixin과 함수를 제공하여 스타일 속성들을 재사용하고 동적으로 스타일을 생성하는 기능을 제공합니다. 이를 통해 스타일 코드를 더욱 모듈화하고 유지보수를 용이하게 할 수 있습니다. 이 글에서는 SCSS의 Mixin과 함수에 대해 알아보겠습니다.

---

Mixin 활용

Mixin은 재사용 가능한 스타일 블록을 정의하고 여러 곳에서 호출하여 사용할 수 있도록 해줍니다.

@mixin rounded-corners($radius) {
  border-radius: $radius;
}

.button {
  @include rounded-corners(5px);
  background-color: #007bff;
  color: #fff;
  padding: 10px;
}

위의 예제에서 rounded-corners라는 Mixin을 정의하고, @include를 사용하여 .button에 적용하였습니다. Mixin은 인자를 받아서 동적으로 스타일을 생성할 수도 있습니다.

@mixin gradient($start-color, $end-color) {
  background: linear-gradient(to right, $start-color, $end-color);
}

.header {
  @include gradient(#007bff, #ff0000);
  color: #fff;
  padding: 20px;
}

---

함수 활용

함수는 Mixin과 비슷하지만, 값을 반환하는 데 사용됩니다.

@function divide($a, $b) {
  @return $a / $b;
}

.container {
  width: divide(1000px, 2);
}

위의 예제에서 divide라는 함수를 정의하고, width에 적용하여 값을 반환하였습니다. 함수를 사용하여 계산된 스타일 속성 값을 생성할 수 있습니다.

SCSS의 Mixin과 함수를 활용하면 스타일 속성을 더욱 재사용 가능하고 유연하게 사용할 수 있습니다. 이를 통해 코드의 중복을 줄이고, 스타일을 더욱 동적으로 관리할 수 있습니다. 다음 글에서는 SCSS의 다른 기능들을 더 자세히 살펴보겠습니다.