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; 
}

Бундан ташқари, миксинларга стандарт қийматларни ҳам бериш мумкин:

@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);
}