SCSS 재활용 @content

OROSY·2021년 4월 17일
0

SCSS

목록 보기
13/13
post-thumbnail

SCSS 재활용 @content

이전 시간에 알아봤던 내용으로 SCSS에서는 @mixin 기호를 활용하여 특정한 이름에 내용을 저장하고 @include 키워드로 해당 내용을 재활용할 수 있었습니다.

@content@mixin 내의 추가적으로 필요한 내용에 대해 담는 그릇으로 사용할 수 있습니다. @include로 호출하여 중괄호 내에 더해줄 추가적인 내용을 입력해주면 됩니다. 아래의 예시에서 알아봅시다.

1.1 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 {
        bottom: 0;
        right: 0;
        margin: auto;
    }
}

1.2 CSS(Compiled)

.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;
}
profile
Life is a matter of a direction not a speed.

0개의 댓글