SASS හි @for ඩිරෙක්ටිව් එක

@for ඩිරෙක්ටිව් එක භාවිතා කරමින් සංගණක විචල්‍යයක් මගින් සඳහන් කරන ලද ප්‍රමාණයක් ඇතුළත නිශ්චිත විලාස ප්‍රතිදානය කළ හැකිය. @for ලිවීමේ පළමු ආකාරය මෙසේ දක්වා ඇත:

@for $var from (begin) through (end)

මෙම අවස්ථාවේ දී, (begin) සහ (end) යන අගයන් පරාසයට සහභාගී වේ. (begin) සහ (end) පූර්ණ සංඛ්‍යා ලබා දිය යුතු බව සැලකිල්ලට ගත යුතුය, මන්ද ඒවා ගණනය කිරීමේ දිශාව නිර්ණය කරයි, එනම් (begin) අගය (end) අගයට වඩා අඩු නම් සංගණකය වැඩි වන අතර, අනෙක් අතට අඩු වේ.

පහත උදාහරණය භාවිතා කරමින් @for ඩිරෙක්ටිව් එකේ ක්‍රියාකාරිත්වය පළමු වාක්‍ය ඛණ්ඩ ආකෘතියෙන් අපි සලකා බලමු:

@for $count from 1 through 5 {
	.li-#{$count} {
		width: $count + px;
	}
}

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

.li-1 {
	width: 1px; 
}
.li-2 {
	width: 2px; 
}
.li-3 {
	width: 3px; 
}
.li-4 {
	width: 4px; 
}
.li-5 {
	width: 5px; 
}

දෙවන ආකාරයේ ලිවීම පහත පරිදි දක්වා ඇත:

@for $var from (begin) to (end)

මෙහිදී (end) අගය බැහැර කරනු ලැබේ.

පෙර උදාහරණය ගෙන එය දෙවන ආකාරයට ලියමු:

@for $count from 1 to 5 {
	.li-#{$count} {
		width: $count + px;
	}
}

දැන් ලැබුණු කේතය සැලකිල්ලට ගන්න:

.li-1 {
	width: 1px; 
}

.li-2 {
	width: 2px; 
}

.li-3 {
	width: 3px; 
}

.li-4 {
	width: 4px; 
}

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

@for $var from 5 through 1 {
	li-#{$var} {
		padding: 10 * $var + px;
	}
}

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

@for $var from 1 to 3 {
	.navbar-link-#{$var} {
		color: blue;
		width: 10px * $var;
	}
}