Параметри на миксините во SASS

Важна карактеристика на миксините во SASS е тоа што тие прифаќаат променливи како параметри, кои се запишуваат во внатрешноста на кружните загради и, ако има неколку променливи, тогаш тие се одделуваат со запирки.

Да го разгледаме следниов пример:

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

Резултат на компајлација:

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

Покрај тоа, во миксини може да се пренесуваат вредности на параметрите по default:

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

После компајлација ќе видиме:

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

Кажете, каков ќе биде резултатот на компајлација на следниов код:

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

Кажете, каков ќе биде резултатот на компајлација на следниов код:

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