SASS-də mixin-lərdə məzmun blokları

Mixin daxilində stil bloklarını ötürmək üçün @content direktivindən istifadə edirik, onun yerinə bizə lazım olan stillər yerləşəcək.

Bir nümuməyə baxaq:

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

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

Kompilyasiya nəticəsi:

* div #block {
	color: red; 
}

Bilmək lazımdır ki, əgər biz @content direktivini birdən çox dəfə və ya dövr daxilində göstərsək, o zaman stil bloku da eyni sayda çağırılacaq.

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

Kompilyasiyadan sonra biz görəcəyik:

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

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

Aşağıdakı kodun kompilyasiya nəticəsi necə olacaq?

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

Aşağıdakı kodun kompilyasiya nəticəsi necə olacaq?

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

Tutaq ki, sizdə aşağıdakı mixin var:

@mixin colors {
	...
}

@content direktivindən istifadə edərək #primary-a aid olan bütün linklər üçün mavi şrift rəngi və dalğalı alt xətt təyin edin.