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

آموزش Sass – کار با دستور کنترلی/حلقه ی @each

حلقه ی each@ برای پیمایش در list/map و کار با آیتم ها بکار می رود. این دستور کنترلی یک فرم یا شکل استفاده دارد و آن each@ var$ in < list or map > می باشد. var$ صرفا اسم متغیر است و می تواند هر نامی همچون length$ یا name$ باشد. < list or map > نیز یک عبارت SassScript است که در خروجی یک مقدار از جنس list یا map را برمی گرداند.

دستور each@ در هر بار اجرای حلقه (تکرار)، مقدار متغیر var$ را بر روی یک آیتم که در list یا map قرار دارد، تنظیم می کند. سپس دستورات style دهی که داخل بدنه ی each تعریف شده را با استفاده از مقدار متغیر مزبور در خروجی تولید می نماید. تعداد دفعات تکرار و اجرای حلقه نیز معادل تعداد المان های موجود در list یا map می باشد. مثال:

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

به کد زیر کامپایل می شود:

.puma-icon {
  background-image: url('/images/puma.png');
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
}
.egret-icon {
  background-image: url('/images/egret.png');
}
.salamander-icon {
  background-image: url('/images/salamander.png');
}

تخصیص مقدار به چند متغیر در دستور each@

دستور each@ می تواند همزمان چندین متغیر را مقداردهی کند. ساختار کلی آن بدین صورت می باشد: each@ var1$, var2$, ... in < list >. اگر مقدار < list > لیستی از لیست ها باشد، در آن صورت هر المان از زیر لیست به متغیر مربوطه تخصیص می یابد. مثال:

@each $animal, $color, $cursor in (puma, black, default),
     (sea-slug, blue, pointer),
     (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

پس از کامپایل به کد زیر تبدیل می شود:

.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default;
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer;
}
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move;
}

از آنجایی که map نیز یک لیست از متغیرها ( جفت اسم و مقدار) است، می توان از map نیز برای مقداردهی همزمان چندین متغیر با دستور کنترلی each@ استفاده کرد. مثال:

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

پس از کامپایل به کد زیر تبدیل می شود:

h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.2em;
}