Блокҳои мундариҷа дар миксинҳо дар 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 ранги шрифти кабуд ва таъкиди чаппа-рост таъин кунед.