SASS 믹신과 함수, 익스텐드 완전 정복

Frontend/CSS

SASS 믹신과 함수, 익스텐드 완전 정복

sliver__ 2025. 6. 1. 16:54

728x90

SASS를 다루는 데 있어 가장 중요한 개념 중 하나는 재사용성입니다. 이번 글에서는 SASS에서 코드를 효율적으로 재사용하기 위한 주요 기능인 믹신, 함수, 그리고 익스텐드(extend) 사용법을 소개합니다. 스타일의 중복을 줄이고 유지 보수성을 높이려는 분이라면 반드시 알아야 할 개념들이죠.

믹신(Mixin)이란?

믹신은 반복해서 사용되는 스타일 블록을 재사용 가능한 코드로 만들 수 있게 해주는 기능입니다. 일종의 스타일 함수라고 보면 됩니다.

@mixin clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

이렇게 작성된 믹신은 다음처럼 포함시켜 사용할 수 있습니다:

.container {
  @include clearfix;
}

이런 식으로 페이지 곳곳에서 동일한 스타일을 적용할 때 유용하며, 코드 중복을 방지하는 **DRY 원칙(Don’t Repeat Yourself)**을 지킬 수 있습니다.

인수를 받는 믹신

믹신은 인수를 받을 수도 있어 더 유연한 스타일을 작성할 수 있습니다.

scss

복사편집

@mixin style-link-text($color) { text-decoration: none; text-transform: uppercase; color: $color; }

@mixin style-link-text($color) {
  text-decoration: none;
  text-transform: uppercase;
  color: $color;
}

a {
  @include style-link-text(#333);
}
button {
  @include style-link-text(#eee);
}

이렇게 하면 색상만 다르게 주고 같은 스타일을 여러 요소에 적용할 수 있습니다.

함수(Function)

SASS의 함수는 입력값을 받아 계산한 결과를 반환하는 기능으로, 믹신과 비슷하지만 값만 반환한다는 점이 다릅니다.

@function divide($a, $b) {
  @return $a / $b * 1px; // 단위 보정
}

.element {
  margin: divide(60, 2); // => 30px
}

실제로 SASS에는 darken, lighten 등의 기본 제공 함수가 있으며, 사용자 정의 함수도 작성할 수 있습니다. CSS 계산이 필요한 경우 매우 유용하죠.

익스텐드(Extend)

@extend는 스타일을 상속받는 방법입니다. 중복 스타일을 줄이면서 선택자 간의 관계를 만들어 줍니다.

%button-placeholder {
  padding: 10px;
  border: none;
  cursor: pointer;
}

.button-main {
  @extend %button-placeholder;
  background: blue;
}

.button-hot {
  @extend %button-placeholder;
  background: red;
}

익스텐드는 스타일을 반복해서 출력하지 않고 CSS에 한 번만 작성되므로, 출력 파일을 최소화할 수 있다는 장점이 있습니다.

믹신과 익스텐드의 차이:

믹신은 호출한 곳마다 코드를 복사하여 붙여넣고,

익스텐드는 공통의 선택자 블록을 공유합니다.

정리

@mixin: 재사용 가능한 스타일 블록 생성
@include: 믹신 호출
@function: 값을 반환하는 계산식 작성
@extend: 선택자 간 스타일 공유

SASS를 잘 활용하면 CSS의 유지 보수성과 생산성이 크게 향상됩니다. 믹신, 함수, 익스텐드 기능을 적극적으로 활용해 보세요!

728x90