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 ට අයත් සියලුම සබැඳි සඳහා නිල් වර්ණයේ අකුරු වර්ගය සහ රැළි සහිත යටි ඉරි යොදන්න.