Mixin

SCSS에서 @mixin은 스타일 규칙의 재사용 가능한 그룹을 정의하는 데 사용됩니다. @mixin을 사용하면 반복적인 CSS 코드를 줄이고, 프로젝트의 유지 관리를 용이하게 할 수 있습니다. 여기 몇 가지 @mixin 사용 사례를 제공하겠습니다.

1. 미디어 쿼리

미디어 쿼리를 쉽게 관리할 수 있도록 @mixin을 사용할 수 있습니다.

@mixin respond-to($media) {
  @if $media == "small" {
    @media (max-width: 600px) { @content; }
  } @else if $media == "medium" {
    @media (max-width: 900px) { @content; }
  } @else if $media == "large" {
    @media (max-width: 1200px) { @content; }
  }
}

// 사용 예
.selector {
  @include respond-to("medium") {
    padding: 20px; // mixin의 @content;부분에 해당 코드가 들어갑니다.
  }
}

2. 플렉스박스 레이아웃

플렉스박스 레이아웃을 적용하기 위한 믹스인을 만들 수 있습니다.

@mixin flexbox($direction, $justify: flex-start, $align: stretch) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
}

// 사용 예
.container {
  @include flexbox(row, center, center);
}

3. 텍스트 트렁크

텍스트 오버플로우를 처리하는 믹스인입니다.

@mixin truncate($width) {
  width: $width;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 사용 예
.text {
  @include truncate(100px);
}

4. 버튼 스타일

버튼의 스타일을 정의하는 믹스인입니다.

@mixin button-style($bgColor, $textColor: white) {
  padding: 0.5em 1em;
  background-color: $bgColor;
  color: $textColor;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  
  &:hover {
    background-color: darken($bgColor, 10%);
  }
}

// 사용 예
.button {
  @include button-style(blue);
}

5. CSS 그리드 레이아웃

CSS 그리드 레이아웃을 적용하기 위한 믹스인입니다.

@mixin grid-layout($columns, $gap) {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  grid-gap: $gap;
}

// 사용 예
.grid-container {
  @include grid-layout(3, 15px);
}

@mixin은 CSS의 DRY(Don't Repeat Yourself) 원칙을 준수하도록 도와줍니다. 자주 사용되는 스타일 패턴을 @mixin으로 정의함으로써, 코드의 가독성을 향상시키고, 유지보수를 용이하게 할 수 있습니다.