@content
@mixin을 사용하다 보면 동일한 내용을 가져다 쓰게 되어 편리하기도 하지만 가끔 한두가지의 예외 경우로 추가 사항이 생길 때가 있다.
div가 있고 그 안에 div 있다고 가정을 해보자
바깥쪽 div는 wrap라는 클래스를 가지고 안쪽 div는 box라는 클래스의 div라고 가정해 보자
wrap div의 스타일시트는
.wrap {
position: relative;
width: 100%;
height: 100%;
}
.box div의 스타일시트는
.wrap .box {
position: absolute;
width: 100%;
height: 100%;
}
여기서 공통된 부분 보면
width: 100%;
height: 100%;
이 두가지 부분을 mixin으로 묶는다고 가정해 보도록 하자.
@mixin fullSize {
width: 100%;
height: 100%;
}
이렇게 작성할 수 있을것이다.
변화되는 부분을 @content로 묶어 보자
@mixin fullSize {
@content;
width: 100%;
height: 100%;
}
이제 @include를 해보면
.wrap {
@include fullSize;
.box {
@include fullSize;
}
}
이렇게만 해 준다면 css파일에는 다음과 같이 컴파일이 수행 될 것이다.
경과 ::
.wrap {
width: 100%;
height: 100%;
}
.wrap .box {
width: 100%;
height: 100%;
}
이제 여기에 변경 될 부분(@content 부분)을 넣어 보도록 해보자
.wrap {
@include fullSize {
position: relative;
}
.box {
@include fullSize {
position: absolute;
}
}
}
결과 ::
.wrap {
position: relative;
width: 100%;
height: 100%;
}
.wrap .box {
position: absolute;
width: 100%;
height: 100%;
}
'스타일시트 > SCSS' 카테고리의 다른 글
| 10. SCSS 에서 rem 자동변환 함수를 css calc()에 적용 하는 방법 (0) | 2025.03.26 |
|---|---|
| 9. SCSS 조건문 - @if, @else if, @else (0) | 2025.03.24 |
| 7. SCSS 반복문 (2) | 2025.03.24 |
| 6. pixel & rem (0) | 2025.03.20 |
| 5. SCSS 기본 문법 - @mixin & @include (1) (0) | 2025.03.20 |