فهرست ها (List)

توابع فهرست Sass برای کار با «فهرست (List)» هستند. با آن ها عضو اضافه می کنی، فهرست ها را ترکیب می کنی، و مقدار می خوانی. فهرست ها تغییرناپذیرند؛ یعنی خروجی جدید می گیری، اصلش عوض نمی شود.

توابع فهرست Sass چیست؟

این توابع افزودن با append، ترکیب با join، طول با length، دسترسی با nth و جستجو با index را می دهند. همچنین جداکننده را با list-separator می خوانی، براکت دار بودن را با is-bracketed می سنجی، و با set-nth نسخه ویرایش شده می سازی. zip هم فهرست های هم ردیف می سازد.

افزودن و ترکیب فهرست ها

«جداکننده (Separator)» نوع فاصله گذاری فهرست است؛ space یا comma.

$l1: (a b c);
$l2: (d e f);
$ap1: append($l1, d);
$ap2: append($l1, (d), comma);
$jn1: join($l1, $l2);
$jn2: join($l1, $l2, comma);
$jn3: join($l1, $l2, $bracketed: true);

.demo-join {
  --append1: #{$ap1};
  --append2: #{$ap2};
  --join1: #{$jn1};
  --join2: #{$jn2};
  --join3: #{$jn3};
}

مشاهده در ادیتور

دسترسی، طول، جداکننده و براکت

فهرست ها 1-مبنـا هستند؛ یعنی اولین عضو در اندیس 1 است.

$l: (a b c);
$len: length($l);
$idxB: index($l, b);
$idxF: index($l, f);
$nth3: nth($l, 3);
$sep1: list-separator(a b c);
$sep2: list-separator(a, b, c);
$br1: is-bracketed([a b c]);
$br2: is-bracketed(a b c);

.info-list {
  --length: $len;
  --index-b: $idxB;
  --index-f: #{$idxF};
  --third: $nth3;
  --sep-space: "#{$sep1}";
  --sep-comma: "#{$sep2}";
  --br-yes: $br1;
  --br-no: $br2;
}

مشاهده در ادیتور

ویرایش موقعیت و زیپ کردن

«زیپ (Zip)» یعنی چسباندن ستون ها کنار هم به ردیف های هم زوج.

$base: (a b c);
$set: set-nth($base, 2, x);
$zip: zip(1px 2px 3px, solid dashed dotted, red green blue);

.rules {
  --set-nth: #{$set};
  --zip: #{$zip};
}

مشاهده در ادیتور

نکته: فهرست ها تغییرناپذیرند. پس set-nth نسخه جدید می سازد و ورودی را تغییر نمی دهد.

سه گام تمرین سریع

1. یک فهرست بساز و با append آیتمی اضافه کن.
2. طول را با length بخوان و عضو سوم را با nth.
3. دو فهرست را با join ترکیب کن و جداکننده را بررسی کن.

برای ادامه، به اعداد (Numeric) سر بزن. سپس با نقشه ها (Map) ساختارهای کلیدی بساز. همچنین از اکستند (@extend) برای اشتراک سبک ها کمک بگیر تا کدت DRY بماند.

جمع بندی سریع

• append ته فهرست اضافه می کند.
• join دو فهرست را ترکیب می کند.
• nth و index دسترسی و جستجو می دهند.
• list-separator نوع جداکننده را برمی گرداند.
• zip ردیف های هم تراز می سازد.