آموزش کار با حلقه ی for در Sass

آموزش Sass – کار با حلقه ی for@

دستور for@ یک مجموعه دستور style دهی را به دفعات معینی تکرار کرده و به عنوان خروجی تولید می کند. در هر بار تکرار حلقه، یک متغیر که نقش شمارنده را ایفا می کند نیز برای تنظیم خروجی (تولید خروجی متفاوت) استفاده می شود.

دستور کنترلی نام برده به دو صورت استفاده می شود:

1. @for $var from < start > through < end >

2. @for $var from < start > to < end >. 

به تفاوت بین دو کلیدواژه ی through و to دقت نمایید. var$ صرفا یک اسم می تواند و هر نام دیگری را می توان جایگزین آن کرد. برای مثال می توان اسم این متغیر i$ تعریف کرده و در دستور بدین صورت بکار برد:

$i; < start > and < end >

. این دستور اعداد صحیح را به عنوان خروجی برمی گرداند. اگر مقدار < start > بزرگتر از < end > باشد، مقدار متغیر شمارنده بجای افزایش، کاهش می یابد.

دستور for@ در هر بار گام اجرا (تکرار) مقدار متغیر var$ را بر روی عدد بعدی در بازه ی مشخص شده تنظیم کرده و مجموعه دستورات style دهی مربوطه را به وسیله ی متغیر var$ در خروجی تولید می کند.

لازم به ذکر است که بین دو فرم استفاده از دستور for@ تفاوت وجود دارد. چنانچه از فرم from…through استفاده نمایید، آنگاه مقدار تعیین شده در < end > نیز جزء بازه ی عددی مورد نظر حساب می شود. اگر از فرم from…to استفاده کنید، در آن صورت مقدار مشخص شده در < end > دیگر در بازه ی اعداد تعیین شده حساب نمی شود.

در زیر نمونه ای از کاربرد فرم اول، from…through، را مشاهده می کنید:

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

به کد زیر ترجمه می شود:

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}