Параметрҳои миксинҳо дар 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);
}