SCSS & SASS - 재활용(@content)

01.SCSS 재활용(@content)

• @content는 @mixin 내의 추가적으로 필요한 내용을 덧 붙이는 용도로 사용합니다.
• @include로 호출하여 중괄호 내에 더해줄 추가적인 내용을 입력해주면 됩니다.

SCSS

@mixin left-top {
    position: absolute;
    top: 0;
    left: 0;
    @content;
}
.container {
    width: 100px;
    height: 100px;
    @include left-top;
}
.box {
    width: 200px;
    height: 300px;
    @include left-top { // @include로 호출하여 중괄호 내에 더해줄 추가적인 내용을 입력해주면 됩니다.
        bottom: 0;
        right: 0;
        margin: auto;
    }
}

CSS

.container {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
}

.box {
  width: 200px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}