[Sass] Mixin과 %
Post

[Sass] Mixin과 %

27/03/2022
Da-Bin Jeong
2

Mixin

Function과 같은 기능을 하는 Mixin

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

사용 방법

1
2
3
4
5
6
7
8
9
10
11

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

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

button {
  @include banner-style(red);
}
  • 선언할 때는 @mixin을 사용해서 선언
  • 사용할 때는 @include 이름(매개변수)로 사용하고 매개변수가 없을 경우 괄호 생략 가능
  • :을 사용해서 매개변수의 기본값을 설정할 수 있음

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

    1
2
3

    @if (type-of($color) == color) {
  color: $color;
}
    • 위 예제는 $color가 컬러 값이 맞는 경우 출력하는 IF문

’%’와 ‘extend’

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

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

사용 방법

1
2
3
4
5
6
7

%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
TIL, Sass, CSS