Mixin parameters in SASS

Een belangrijk kenmerk van mixins in SASS is dat ze variabelen accepteren als parameters, die binnen ronde haakjes worden geschreven en, als er meerdere variabelen zijn, dan worden deze gescheiden door komma's.

Laten we het volgende voorbeeld bekijken:

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

Resultaat van compilatie:

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

Daarnaast kunnen standaardwaarden voor parameters worden doorgegeven aan mixins:

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

Na compilatie zullen we het volgende zien:

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

Vertel wat het resultaat van de compilatie zal zijn van de volgende code:

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

Vertel wat het resultaat van de compilatie zal zijn van de volgende code:

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