Scss - mixin basics

huhu·2020년 2월 8일
0

@mixin으로 선언하고 @include로 불러온다.
일반적으로 @extend 대신 mixin을 사용하는 것을 권장한다(https://sass-guidelin.es/ko/#extend)

examples (from https://poiemaweb.com/sass-css-extention)

@mixin circle($size: 10px) {
  width: $size;
  height: $size;
  border-radius: 50%;
}

.box {
  // 인자가 없으면 초기값을 사용한다.
  @include circle();
  background: #f00;
}
@mixin position($position, $top: null, $right: null, $bottom: null, $left: null) {
  position: $position;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

.box {
  @include position(absolute, $top: 10px, $left: 50%);
}
profile
후후

0개의 댓글