Satura bloki miksu SASS

Lai nodotu stilu bloku iekšpusē miksā, mēs izmantojam direktīvu @content, kuras vietā tiks ievietoti mums vajadzīgie stili.

Apskatīsim piemēru:

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

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

Kompilācijas rezultāts:

* div #block {
	color: red; 
}

Ir svarīgi zināt, ka, ja mēs norādām direktīvu @content vairāk nekā vienu reizi vai cilpas iekšpusē, tad tikpat reižu tiks izsaukts arī stilu bloks.

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

Pēc kompilācijas mēs redzēsim:

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

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

Pastāstiet, kāds būs kompilācijas rezultāts šim kodam:

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

Pastāstiet, kāds būs kompilācijas rezultāts šim kodam:

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

Pieņemsim, ka jums ir šāds mikss:

@mixin colors {
	...
}

Izmantojot direktīvu @content, iestatiet visām saistēm, kas attiecas uz #primary, zilu fonta krāsu un viļņotu pasvītrojumu.