Բլոկներ պարունակության միկսներում 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-ին, սահմանեք տեքստի կապույտ գույն և ալիքաձև ընդգծում: