SASS miksinu parametri

Svarīga SASS miksinu īpatnība ir tā, ka tie pieņem mainīgos parametros, kas tiek rakstīti iekšā apaļajās iekavās un, ja ir vairāki mainīgie, tad tos atdala ar komatiem.

Apskatīsim šādu piemēru:

@mixin active($color, $width) {
	border: {
		color: $color;
		width: $width;
		style: dotted;
	}
}
p {
	@include active(yellow, 2px);
}

Kompilācijas rezultāts:

p {
	border-color: yellow;
	border-width: 2px;
	border-style: dashed; 
}

Papildus tam, miksinos var padot noklusējuma parametru vērtības:

@mixin active($color,  $width: 2px) {
	border: {
		color: $color;
		width: $width;
		style: dotted;
	}
}
p {
	@include active(yellow);
}
div {
	@include active(yellow, 4px);
}

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

p {
	border-color: yellow;
	border-width: 2px;
	border-style: dotted;
}
div {
	border-color: yellow;
	border-width: 4px;
	border-style: dotted;
}

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

@mixin simple-border($padding-top, $padding-bottom) {
	border: {
		padding-top: $padding-top;
		padding-bottom: $padding-bottom;
		color: green;
	}
}
p {
	@include simple-border(10px, 30px );
}

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

@mixin simple-border($padding-top, $padding-bottom: 20px) {
	border: {
	padding-top: $padding-top;
	padding-bottom: $padding-bottom;
	color: green;
	}
}
p {
	@include simple-border(10px);
}