Mixin

Function과 같은 기능을 하는 Mixin

• Sass에서 Mixin을 사용하면 마치 Function처럼 여러 스타일을 묶어서 적용 시킬 수 있다.
• 또한 매개변수를 받아서 스타일을 조금씩 수정해서 적용시킬 수 있다.

사용 방법

copy@mixin banner-style($color: black) {
  color: $color;

  .banner-close {
    background-color: gray;
  }
}

button {
  @include banner-style(red);
}

• 선언할 때는 @mixin을 사용해서 선언

• 사용할 때는 @include 이름(매개변수)로 사용하고 매개변수가 없을 경우 괄호 생략 가능

• :을 사용해서 매개변수의 기본값을 설정할 수 있음

• type-of 메서드를 사용하면 유효성 검사도 가능

  copy@if (type-of($color) == color) {
    color: $color;
  }
  

  • 위 예제는 $color가 컬러 값이 맞는 경우 출력하는 IF문

'%'와 'extend'

Mixin과 비슷하지만 전달인자가 없을 때는 %

• Mixin과 비슷하게 함수처럼 사용 가능
• Mixin과 차이라면 css로 컴파일될 때 비슷한 것들은 알아서 묶어서 써 줌
• 그리고 사용 방법도 조금 다름

사용 방법

copy%btn-style-18 {
  width: 180px;
}

.portal-btn {
  @extend %btn-style-18;
}

• %이름{}형태로 선언
• @extend %이름으로 불러올 수 있음

Reference

• https://edu.goorm.io/lecture/25681/김버그의-ui-개발-부트캠프-경력같은-신입으로-레벨업
• https://sass-lang.com/documentation/at-rules/mixin
• https://sass-lang.com/documentation/at-rules/extend