Mixin-parameters in SASS

'n Belangrike kenmerk van mixins in SASS is dat hulle veranderlikes as parameters aanvaar, wat binne ronde hakies geskryf word en, as daar verskeie veranderlikes is, word hulle met kommas geskei.

Kom ons kyk na die volgende voorbeeld:

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

Resultaat van kompilering:

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

Daarbenewens kan standaardwaardes aan parameters oorgedra word in mixins:

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

Na kompilering sal ons sien:

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

Vertel wat die resultaat van die kompilering van die volgende kode sal wees:

@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 die resultaat van die kompilering van die volgende kode sal wees:

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