SASS හි ශ්‍රිත

මෙම පාඩමෙහිදී, ශ්‍රිත භාවිතා කරන ආකාරය අපි සොයා බලමු. ශ්‍රිත, මිශ්‍රණ වලට තරමක් සමාන වන නමුත් ඒවාට ඔවුන්ගේ අගයන් වෙනස් කළ හැකි පරාමිති එකතු කිරීමට ඉඩ සලසයි.

අපි ෆොන්ට් ප්‍රමාණය සකසන func නම් ශ්‍රිතයක් සාදමු. ප්‍රමාණය පරාමිතියක් මගින් සපයා ඇති අතර පරාමිතිය ලෙස විචල්‍යයක් ක්‍රියා කරයි:

$font-size: 10px;

ඉන්පසු අපි ශ්‍රිතය තුළ $n පරාමිතිය ප්‍රකාශ කරන අතර ශ්‍රිත ශරීරය තුළ අනිවාර්යයෙන්ම @return සඳහන් කරමු:

@function func($n) {
	@return $n * $font-size;
}
#main {
	font-size: func(2);
}

සංකලනයේ ප්‍රතිඵලය:

#main {
	font-size: 20px;
}

නම්කරන ලද තර්කයක් ශ්‍රිතයකට ද සම්ප්‍රේෂණය කළ හැකිය. පෙර උදාහරණයේ කොන්දේසි නැවත ලියමු:

@function func($n) {
	@return $n * $font-size;
}
#main {
	font-size: func($n: 2);
}

සහ styles.css ගොනුව තුළ අපි එම කේතයම දකිමු:

#main {
	font-size: 20px;
}

පහත කේතයේ සංකලන ප්‍රතිඵලය කුමක්දැයි පැහැදිලි කරන්න:

$size: 10px;
@function func($num) {
	@return $num + $size;
}
div {
	font-size: func(4);
}

පහත කේතයේ සංකලන ප්‍රතිඵලය කුමක්දැයි පැහැදිලි කරන්න:

$size: 4px;
@function func($num) {
	@return $num + $size;
}
.card {
	padding: func(2);
	margin: func(6);
	width: func(416);
}

පහත කේතයේ සංකලන ප්‍රතිඵලය කුමක්දැයි පැහැදිලි කරන්න:

$size: 2px;

@function func($num) {
	@return ($num * $size) + 20;
}

.logo {
	width: func(2);
	height: func(4);
}