القوائم في SASS

تشرح هذه المقالة القوائم في SASS۔

سوف نغطي أساسيات واستخدامات متقدمة للقوائم في SASS ونقدم أمثلة عملية۔

YouTube Video

القوائم في SASS

يقدم SASS ميزات مفيدة تشبه البرمجة كامتداد ل CSS۔ من بين هذه الميزات، تُعد القوائم ميزة مفيدة جدًا عند تعريف الأنماط بشكل ديناميكي۔

ما هي قائمة SASS؟

قائمة SASS هي مجموعة من القيم مفصولة بالفواصل (,) أو الفراغات۔ تُستخدم عند تمرير قيم متعددة إلى خصائص CSS أو عند إجراء التكرارات۔

1// Comma-separated list
2$comma-list: 1px, 2px, 3px;
3
4// Space-separated list
5$space-list: bold italic 16px Arial;

الميزات الرئيسية للقوائم تتضمن النقاط التالية:۔

• يمكن أن تحتوي القائمة على قيم من أي نوع من البيانات، مثل الأرقام، النصوص، أو الألوان۔
• يمكنك اختيار بين القوائم المفصولة بفواصل أو الفراغات حسب الحالة الاستخدام۔

مثال أساسي لتعريف الأنماط باستخدام القوائم

إليك مثال على إنشاء أنماط حدود بسيطة بشكل ديناميكي باستخدام القوائم۔

 1@use "sass:list";
 2
 3$border-widths: 1px, 2px, 3px;
 4
 5.border-example {
 6  @for $i from 1 through list.length($border-widths) {
 7    &-#{list.nth($border-widths, $i)} {
 8      border-width: list.nth($border-widths, $i);
 9    }
10  }
11}

مخرجات التجميع

 1.border-example-1px {
 2  border-width: 1px;
 3}
 4
 5.border-example-2px {
 6  border-width: 2px;
 7}
 8
 9.border-example-3px {
10  border-width: 3px;
11}

• باستخدام دالة nth() من وحدة sass:list، يمكنك استرجاع قيمة محددة من قائمة۔

معالجة القوائم

يوفر موديل sass:list دوال لمعالجة القوائم، مما يسهل استرجاع العناصر وإضافتها.۔

استرجاع عنصر: nth()

nth() هي دالة تسترجع عنصراً من قائمة۔

1@use "sass:list";
2
3$colors: red, green, blue;
4$first-color: list.nth($colors, 1); // red

• في هذا المثال، تُستخدم دالة nth() للحصول على القيمة عند الفهرس المحدد۔

تحقق من الفهرس: index()

index() هي دالة تُرجع موضع عنصر في قائمة۔

1@use "sass:list";
2
3$colors: red, green, blue;
4$position: list.index($colors, blue); // 3

• في هذا الكود، تُستخدم دالة index() لمعرفة أن العنصر blue هو العنصر الثالث في القائمة۔

الحصول على طول القائمة: length()

length() هي دالة تعيد طول القائمة۔

1@use "sass:list";
2
3$fonts: Arial, Helvetica, sans-serif;
4$count: list.length($fonts); // 3

• في هذا المثال، تُستخدم دالة length() للحصول على عدد القيم في القائمة۔

إضافة عنصر: append()

append() هي دالة تُستخدم لإضافة عناصر إلى قائمة۔

1@use "sass:list";
2
3$shapes: circle, square;
4$shapes: list.append($shapes, triangle); // circle, square, triangle

• في هذا المثال، تُستخدم دالة append() لإضافة قيمة إلى القائمة۔

استبدال عنصر: set-nth()

set-nth() هي دالة تستبدل العنصر في موضع محدد بقيمة أخرى۔

1@use "sass:list";
2
3$colors: red, green, blue;
4$updated: list.set-nth($colors, 2, yellow); // red, yellow, blue

• في هذا الكود، تُستخدم دالة set-nth() لاستبدال العنصر الثاني بـ yellow۔

دمج القوائم: join()

join() هي دالة تدمج قائمتين معًا۔

1@use "sass:list";
2
3$list1: a, b;
4$list2: c, d;
5$combined: list.join($list1, $list2); // a, b, c, d

• في هذا الكود، تُستخدم دالة join() لدمج قائمتين في قائمة واحدة۔

إقران القوائم: zip()

zip() هي دالة تجمع عدة قوائم، عنصراً بعنصر۔

1@use "sass:list";
2
3$names: alice, bob;
4$ages: 20, 30;
5$zipped: list.zip($names, $ages); // (alice 20, bob 30)

• في هذا الكود، تُستخدم دالة zip() لدمج أسماء وأعمار ليكونا أزواجًا۔

القوائم المتداخلة

يمكن أيضًا أن تكون القوائم متداخلة، مما يسمح باستخدامها مثل المصوفات ثنائية الأبعاد۔

1@use "sass:list";
2
3$nested-list: (red, green), (blue, yellow);
4
5// Accessing elements of a nested list
6$first-sublist: list.nth($nested-list, 1); // (red, green)
7$first-color: list.nth(list.nth($nested-list, 1), 1); // red

• من خلال التعامل مع هياكل البيانات المعقدة، يصبح توليد الأنماط المتقدم ممكنًا۔

مثال عملي: إنشاء التدرجات اللونية

إليك مثال على توليد التدرجات اللونية بكفاءة باستخدام القوائم۔

 1@use "sass:list";
 2@use "sass:math";
 3
 4$colors: red, orange, yellow, green, blue;
 5
 6@function gradient($colors) {
 7  $gradient: ();
 8  $len: list.length($colors);
 9
10  @for $i from 1 through $len {
11    // build "color percent%" string with interpolation
12    $item: "#{list.nth($colors, $i)} #{math.div(100%, $len) * $i}";
13    $gradient: list.append($gradient, $item);
14  }
15
16  @return $gradient;
17}
18
19.background {
20  background: linear-gradient(to right, #{list.join(gradient($colors), ', ')});
21}

مخرجات التجميع

1.background {
2	background: linear-gradient(to right, red 20%, orange 40%, yellow 60%, green 80%, blue 100%);
3}

• هذا المثال هو على توليد التدرجات تلقائيًا باستخدام القوائم في SCSS۔

  • الألوان المستخدمة للتدرج معرفة في قائمة $colors۔
  • في دالة gradient()، يتم حساب موضع ويتم توزيعه بالتساوي على كل لون بناءً على عدد الألوان، مما ينشئ قائمة للتدرج۔
  • في صنف .background، يُستخدم linear-gradient لدمج قائمة الألوان التي تم توليديها وتطبيق تدرج أفقي۔

• نظرًا لأنه يتم حساب المواقع تلقائيًا وفقًا لطول قائمة الألوان، يمكنك بسهولة إنشاء تدرج متساوٍ عن طريق إضافة أو تغيير الألوان۔

الاحتياطات وأفضل الممارسات

يمكن النظر في النقاط التالية عند استخدام القوائم:۔

• نوع مفصل القائمة القوائم المفصولة بالفواصل والفراغات تُعامل بشكل مختلف، لذلك عليك الاختيار بشكل مناسب حسب الحالة۔

• حجم القائمة عند معالجة القوائم بشكل ديناميكي، من الآمن التحقق من الحجم باستخدام دالة length()۔

• إدارة القوائم المتداخلة عند التعامل مع القوائم المتداخلة، يمكن لعمليات الفهرسة الدقيقة أن تساعد في تجنب الأخطاء۔

الخاتمة

القوائم في SASS أداة قوية لتعريف الأنماط بشكل ديناميكي وإدارة التصاميم المعقدة بكفاءة۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video