반응형
🔺문제
- @include 선언 후 추가 스타일 지정이 안됨.
- parent의 child 스타일 지정 안됨.
.parent {
@include mix() {
// 스타일지정
} (
// Error
)
// Error
.child {
}
}
html 구조
<div class="position-wrapper">
<div class="box1">BOX1</div>
<div class="box2">BOX2</div>
<div class="box3">BOX3</div>
</div>
@mixin
@mixin 믹스인이름($매개변수: 기본값) {
스타일;
}
@include 믹스인이름(인수);
@content
@mixin 믹스인이름() {
스타일;
@content;
}
@include 믹스인이름() {
// 스타일블록
스타일;
}
@mixin position(
$p: absolute;
$t: null,
$b: null,
$l: null,
$r: null
) {
position: $p;
top: $t;
bottom: $b;
left: $l;
right: $r;
// @content 넣어줘야 스타일 추가 가능.
@content;
}
.position-wrapper {
@include position(
$p: relative;
$t: 0px;
$l: 0px;
) {
border: 1px solid #000;
width: 500px;
height: 150px;
}
div {
float: left;
width: 50px;
height: 50px;
background: gold;
&.box2 {
@inlcude position (
$t: 0px,
$l: 0px
) {
transform: translate(-50%, -50%);
}
}
&.box3 {
@include position (
$b: 0px;
$r: 0px;
)
}
}
}
/* CSS */
.position-wrapper {
position: relative;
top: 0px;
left: 0px;
border: 1px solid #000;
width: 500px;
height: 150px;
}
.position-wrapper::after {
display: block;
content: "";
clear: both;
}
.position-wrapper div {
float: left;
width: 50px;
height: 50px;
background-color: gold;
}
.position-wrapper div.box2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.position-wrapper div.box3 {
position: absolute;
bottom: 0px;
right: 0px;
}
@mixin안에 @content를 넣어야 @include안에서 스타일 추가가 가능하다.
Refercnce
반응형
'👩🏻💻STUDY > SASS' 카테고리의 다른 글
[SASS] Node로 sass 시작하기 (0) | 2022.04.19 |
---|---|
[SASS] css 전처리기 컴파일러 koala(코알라) (0) | 2021.10.08 |
[SCSS] vscode로 sass compiler하기 (0) | 2021.07.02 |