SASS da miksinlar uchun kontent bloklari

Miksin ichida uslublar blokini uzatish uchun @content direktivasidan foydalanamiz, uning o'rniga bizga kerakli uslublar joylashadi.

Keling, bir misolni ko'rib chiqaylik:

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

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

Kompilyatsiya natijasi:

* div #block {
	color: red; 
}

Shuni bilish kerakki, agar biz @content direktivasini bir martadan ko'p yoki tsikl ichida ko'rsatsek, uslublar bloki ham shuncha marta chaqiriladi.

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

Kompilyatsiyadan so'ng biz ko'ramiz:

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

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

Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:

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

Quyidagi kodning kompilyatsiya natijasi qanday bo'lishini tushunting:

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

Faraz qilaylik, sizda quyidagi miksin bor:

@mixin colors {
	...
}

@content direktivasidan foydalanib, #primary ga tegishli bo'lgan barcha havolalar uchun shriftning ko'k rangini va to'lqinli tagiga chizishni o'rnating.