Parametrii mixin-urilor în SASS

O caracteristică importantă a mixin-urilor în SASS este faptul că acestea pot primi variabile ca parametri, care sunt scriși în interiorul parantezelor rotunde și, dacă există mai multe variabile, acestea sunt separate prin virgule.

Să analizăm următorul exemplu:

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

Rezultatul compilării:

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

În plus, în mixin-uri se pot transmite valori implicite pentru parametri:

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

După compilare vom vedea:

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

Spuneți care va fi rezultatul compilării următorului cod:

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

Spuneți care va fi rezultatul compilării următorului cod:

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