[SCSS]@mixin 설명과 예시

@mixin은 Sass에서 사용되는 지시자로, 재사용 가능한 스타일 패턴을 정의하는 데 사용됩니다. @mixin은 일종의 함수로 생각할 수 있습니다. 함수는 코드를 한 번 작성하고 나중에 여러 곳에서 호출하여 재사용할 수 있게 해줍니다. 마찬가지로 @mixin은 스타일 블록을 정의하고 여러 규칙에서 재사용할 수 있도록 합니다.

 

 

예제1.

예를 들어, 다음과 같이 tab-bar 믹스인을 정의할 수 있습니다.

@mixin tab-bar($color, $height) {
  background-color: $color;
  height: $height;
  // 추가적인 탭 바 스타일 설정
}

 

tab-bar 믹스인은 탭 바(tab bar) 컴포넌트의 스타일을 생성하는데 사용될 수 있습니다. 이 믹스인은 $color와 $height 두 가지 매개변수를 받습니다. $color는 탭 바의 배경색이 될 것이고, $height는 탭 바의 높이를 지정할 것입니다.

 

이제 이 믹스인을 사용하여 탭 바 컴포넌트의 스타일을 지정할 수 있습니다.

.tab-bar {
  @include tab-bar(#333, 40px); // 배경색은 #333, 높이는 40px로 설정
}

 

위의 코드에서 tab-bar 믹스인을 사용하여 .tab-bar 클래스에 대한 스타일을 지정했습니다. 이 클래스는 배경색이 #333이고 높이가 40px인 탭 바를 생성합니다.

이렇게 하면 동일한 스타일을 여러 규칙에서 반복해서 작성할 필요 없이 간단한 @mixin을 사용하여 재사용할 수 있으므로 코드를 보다 효율적으로 유지보수할 수 있습니다.

 

예제2.

자간을 믹스인으로 지정하는 방법

@mixin ls($value: 1) {
  letter-spacing: calc($value * 0.01em);
}

 

아래처럼 사용가능

.text-1 {
  @include ls(1);
}

.text-2 {
  @include ls(2);
}

 

믹스인을 사용하는 가장큰 이유는 재상용성입니다.

자바스크립트에서 함수라고 보시면 됩니다.