Khối nội dung trong mixin trong SASS

Để truyền một khối kiểu bên trong mixin, chúng ta sử dụng chỉ thị @content, chính vị trí này sẽ chứa các kiểu chúng ta cần.

Hãy xem xét một ví dụ:

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

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

Kết quả biên dịch:

* div #block {
	color: red; 
}

Cần biết rằng nếu chúng ta chỉ định chỉ thị @content nhiều hơn một lần hoặc bên trong một vòng lặp, thì khối kiểu cũng sẽ được gọi bấy nhiêu lần.

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

Sau khi biên dịch, chúng ta sẽ thấy:

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

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

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ như thế nào:

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

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ như thế nào:

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

Giả sử bạn có mixin sau:

@mixin colors {
	...
}

Sử dụng chỉ thị @content, hãy đặt cho tất cả các liên kết thuộc về #primary màu chữ xanh lam và gạch chân kiểu sóng.