[SCSS] @mixin 단어 정리

scss

//인수 기본값 설정 가능
@mixin box($size: 80px, $color: tomato) {
  // $size 매개변수
  width: $size;
  height: $size;
  background-color: $color;
}

.container {
  //200px, red 인수
  @include box(200px, red);
  .item {
  	//$color: green 키워드 인수
    @include box($color: green);
  }
}

컴파일된 css

.container {
  width: 200px;
  height: 200px;
  background-color: red;
}
.container .item {
  width: 80px;
  height: 80px;
  background-color: green;
}

좋은 웹페이지 즐겨찾기