[SASS] @mixin @content @include

🔺문제

1. @include 선언 후 추가 스타일 지정이 안됨.
2. 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

Sass(SCSS)완전정복