On this page

SASS, SCSS mixin과 include

문서 생성 2022-01-24 18:12:38 최근 수정 2022-01-24 18:13:30

On this page

Goal

Sass와 SCSS에서 mixin, include에 대해 알아본다.

mixin을 사용하면 자주 사용하는 CSS 규칙을 그룹화해서 은 재사용할 수 있다. @mixin으로 선언해서 포함할 때는 @include를 사용하면 된다.

@mixin 믹스인이름 () {
  /* 스타일 */
}

@mixin box-size($w, $h) {
  width: $w;
  height: $h;
}

.box1 {
  @include box-size(100px, 200px);
}
.box2 {
  @include box-size(200px, 400px);
}

다음 처럼 기본값을 설정해두면 전달되는 값이 없는 경우에 기본값이 적용된다.

@mixin box-size($w: 100, $h: 100) {
  width: $w;
  height: $h;
}

.box1 {
  @include box-size;
}
.box2 {
  @include box-size;
}

믹스인 선언하기

=mt1
  margin-top:5px

선언된 믹스인 사용하기

+믹스인이름