SASS 믹스인 내 콘텐츠 블록

믹스인 내부에 스타일 블록을 전달하기 위해 지시어 @content를 사용하며, 이 위치에 필요한 스타일이 삽입됩니다.

예를 살펴보겠습니다:

@mixin active {
	* div {
		@content;
	}
}

@include active {
	#block {
		color: red;
	}
}

컴파일 결과:

* div #block {
	color: red; 
}

지시어 @content를 한 번 이상 또는 루프 내에서 지정하면 스타일 블록도 그만큼 여러 번 호출된다는 점을 알아야 합니다.

@mixin active {
	div {
		@content;
	}
navbar {
		@content;
	}
}
@include active {
	#block {
		color: red;
	}
	button {
		color:green;
	}
}

컴파일 후 다음과 같이 표시됩니다:

div #block {
	color: red; 
}
div button {
	color: green; 
}

navbar #block {
	color: red; 
}
navbar button {
	color: green; 
}

다음 코드의 컴파일 결과는 무엇이 될지 설명해 보세요:

@mixin super-link {
	a {
		@content;
	}
}
@include super-link {
	color: blue;
	text-decoration: underline;
}

다음 코드의 컴파일 결과는 무엇이 될지 설명해 보세요:

@mixin super-link {
	a {
		@content;
	}
	a .primary-link{
		@content;
		font-weight: bold;
	}
}
@include super-link {
	color: blue;
	text-decoration: underline;
}

다음과 같은 믹스인이 있다고 가정합니다:

@mixin colors {
	...
}

지시어 @content를 사용하여 #primary에 속하는 모든 링크의 글꼴 색상을 파란색으로, 밑줄 스타일을 물결 모양으로 설정하세요.