@mixin로 재사용할 스타일 정의하고 @include로 사용

@mixin로 재사용할 스타일 정의하고 @include로 사용

@mixin과 @include는 SCSS의 강력한 기능 중 하나로, 재사용 가능한 스타일을 만들고 관리할 수 있게 도와준다. 이를 통해 DRY(Don't Repeat Yourself) 원칙을 따르는 깔끔하고 유지보수가 쉬운 코드를 작성할 수 있다.

 

@mixin, @include

• @mixin : 재사용할 그룹 선언을 정의한다.
• @include : 재사용할 스타일을 사용한다.

/* index.module.scss */

/* mixin 으로 재사용 가능한 스타일 그룹을 정의한다. */
@mixin section-layout {
  padding : 32px 100px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

section {
  /* 이전에 정의된 @mixin을 호출하는데 사용한다. */
  @include section-layout
}

위와 같이 scss에서 작성하면 실제 렌더링되는 CSS는 다음과 같다.

/* 렌더링되는 css */

section{
  padding : 32px 100px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

이러한 방식을 사용하면 CSS를 효율적으로 작성하고 중복을 줄일 수 있다.

@mixin과 @include에 변수 사용

또한 SCSS는 @mixin에 인자를 전달할 수 있어 동적인 스타일 정의가 가능하다.

@mixin box-shadow($x: 0, $y: 0, $blur: 1px, $color: #000) {
  -webkit-box-shadow: $x $y $blur $color;
  -moz-box-shadow: $x $y $blur $color;
  box-shadow: $x $y $blur $color;
}

.button {
	@include box-shadow(2px,2px,5px,#ccc);
}

위의 scss코드는 아래 css로 컴파일된다.

.button {
  -webkit-box-shadow: 2px 2px 5px #ccc;
  -moz-box-shadow: 2px 2px 5px #ccc;
  box-shadow: 2px 2px 5px #ccc;
}