컨텐츠 블록 @content

• @mixin 내부에 @content가 있으면 해당 부분의 컨텐츠(스타일)을 블록형태로 전달한다.
• 기존 믹스인의 기능에 선택자 또는 속성을 추가할 때 사용한다.

@content로 속성을 추가한 경우

style.scss

@mixin border-radius($radius) {
	border-radius: $radius;
	@content;
}

.box {
	@include border-radius(10px) {
			border-style: dotted;
	}
}

style.css

.box {
  border-radius: 10px;
  border-style: dotted;
}

• 단순히 속성만 @content를 이용해서 추가할 경우 아래와 같이 @include가 있는 선택자에 바로 CSS 속성을 추가해도 컴파일된 CSS 코드는 동일하다.

style.scss

@mixin border-radius($radius) {
    border-radius: $radius;
}

.box {
    @include border-radius(10px);
    border-style: dotted;

}

style.css

.box {
  border-radius: 10px;
  border-style: dotted;
}

@content로 선택자, 속성을 함께 컨텐츠 블록으로 전달하는 경우

style.scss

@mixin sample {
	@content;
}

@include sample {
	.add {
		color: crimson;
	}
}

@content에 의해 @include 내에 .add 선택자와 .add 선택자가 가진 모든 속성이 CSS 선택자로 컴파일 된다.

style.css

.add {
  color: crimson;
}

@content로 부모요소에 자식요소 구조의 형태로 선택자와 속성을 함께 컨텐츠 블록으로 전달하는 경우

style.scss

@mixin sample {
	.frame {
		border: 1px solid black;
		width: 200px;
		height: 200px;
		@content;
	}
}

@include sample {
	.add {
		color: crimson;
		background-color: yellowgreen;
		&:hover {
			color: royalblue;
		}
	}
}

@content에 의해 @include내에 .add 선택자와 .add 선택자가 가진 모든 속성이 @mixin 내부의 .frame 선택자의 자식 요소로 컴파일 되면서 전달됨

style.css

.frame {
  border: 1px solid black;
  width: 200px;
  height: 200px;
}
.frame .add {
  color: crimson;
  background-color: yellowgreen;
}
.frame .add:hover {
  color: royalblue;
}