Parámetros de mixins en SASS

Una característica importante de los mixins en SASS es que aceptan variables en los parámetros, que se escriben dentro de paréntesis y, si hay varias variables, se separan por comas.

Consideremos el siguiente ejemplo:

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

Resultado de la compilación:

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

Además, se pueden pasar valores predeterminados a los parámetros de los mixins:

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

Después de la compilación veremos:

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

Explica, cuál será el resultado de la compilación del siguiente código:

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

Explica, cuál será el resultado de la compilación del siguiente código:

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