Parameter von Mixins in SASS

Ein wichtiges Merkmal von Mixins in SASS ist, dass sie Variablen als Parameter entgegennehmen, die innerhalb runder Klammern notiert werden und, falls es mehrere Variablen gibt, diese durch Kommas getrennt werden.

Betrachten wir das folgende Beispiel:

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

Ergebnis der Kompilierung:

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

Zusätzlich können Standardwerte für Parameter an Mixins übergeben werden:

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

Nach der Kompilierung sehen wir:

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

Erzählen Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussehen wird:

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

Erzählen Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussehen wird:

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