TIL | SCSS Mixin(재활용)

SCSS

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

.box1 {
  @include size;
}

.box2 {
  @include size($h: 300px);
}

.box3 {
  @include size;
}

⬇️
CSS

.box1 {
  width: 100px;
  height: 100px;
}

.box2 {
  width: 100px;
  height: 300px;
}

.box3 {
  width: 100px;
  height: 100px;
}

Mixin은 스타일 시트 전체에서 재사용할 CSS이다.

Mixin은 두 가지만 기억하면 된다.

• @mixin(선언하기)
• @include(포함하기)