القوائم والاستيفاء

مقدمة إلى قوائم SASS

قوائم SASS هي مجموعات مرتبة من القيم مفصولة بمسافات أو فواصل. إنها مشابهة للمصفوفات في لغات البرمجة الأخرى ولكن لها صيغة فريدة في SASS. القوائم هي هياكل بيانات أساسية تمكنك من تخزين قيم متعددة مرتبطة في متغير واحد وإجراء عمليات عليها.

ما هي قوائم SASS؟

يمكن أن تحتوي القائمة على أي نوع من القيم: أرقام، نصوص، ألوان، قيم منطقية، null، أو حتى قوائم أخرى. القوائم في SASS تبدأ من الفهرس 1 (العنصر الأول في الموضع 1، وليس 0):

// قائمة مفصولة بمسافات
$fonts: Arial Helvetica sans-serif;

// قائمة مفصولة بفواصل
$sizes: 12px, 16px, 20px, 24px;

// قيم مختلطة
$mixed: 10px solid #333;

// قيمة واحدة (لا تزال قائمة)
$single: 1rem;

// قائمة فارغة
$empty: ();

// قائمة من القوائم
$matrix: (1 2 3), (4 5 6), (7 8 9);

متى تستخدم القوائم مقابل الخرائط

اختر القوائم عندما تحتاج إلى:

• مجموعة مرتبة من القيم
• التكرار عبر القيم بالتسلسل
• مصفوفات بسيطة بدون ارتباطات مفتاح-قيمة
• قيم خصائص CSS (border، font-family، box-shadow)

اختر الخرائط عندما تحتاج إلى:

• أزواج مفتاح-قيمة للوصول المُسمى
• كائنات التكوين
• بيانات تحتاج إلى مفاتيح وصفية
• هياكل بيانات متداخلة

إنشاء والوصول إلى القوائم

فهرسة القائمة باستخدام nth()

الوصول إلى عناصر القائمة حسب الموضع باستخدام دالة nth(). تذكر: قوائم SASS تبدأ من الفهرس 1!

$colors: red, green, blue, yellow;

.first {
  color: nth($colors, 1); // red
}

.second {
  color: nth($colors, 2); // green
}

.last {
  color: nth($colors, -1); // yellow (الفهارس السالبة تُحسب من النهاية)
}

// الاستخدام في الحسابات
$sizes: 10px, 20px, 30px;
$base-size: nth($sizes, 1); // 10px
$double-size: nth($sizes, 2) * 2; // 40px

الحصول على طول القائمة

استخدم length() للحصول على عدد العناصر في القائمة:

$breakpoints: 576px, 768px, 992px, 1200px;
$count: length($breakpoints); // 4

// نمط وصول آمن
@function safe-nth($list, $index, $fallback: null) {
  @if $index > 0 and $index <= length($list) {
    @return nth($list, $index);
  }
  @return $fallback;
}

$color: safe-nth($colors, 10, #000); // يُرجع #000 إذا كان الفهرس غير صالح

تعديل القوائم

إضافة عناصر باستخدام append()

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

$colors: red, green;
$colors: append($colors, blue); // red, green, blue
$colors: append($colors, yellow, comma); // red, green, blue, yellow

// تحديد الفاصل بشكل صريح
$spaced-list: append((), first, space); // first
$spaced-list: append($spaced-list, second, space); // first second

// بناء القوائم ديناميكياً
$sizes: ();
@for $i from 1 through 5 {
  $sizes: append($sizes, $i * 10px);
}
// النتيجة: 10px, 20px, 30px, 40px, 50px

ضم القوائم باستخدام join()

دمج قائمتين في واحدة باستخدام join():

$list1: red, green;
$list2: blue, yellow;

$combined: join($list1, $list2); // red, green, blue, yellow
$combined-comma: join($list1, $list2, comma); // فرض فاصل فاصلة
$combined-space: join($list1, $list2, space); // فرض فاصل مسافة

// مثال عملي: دمج قيم نقاط التوقف
$mobile-bp: 320px, 480px;
$tablet-bp: 768px, 1024px;
$all-bp: join($mobile-bp, $tablet-bp); // 320px, 480px, 768px, 1024px

إيجاد العناصر باستخدام index()

إيجاد موضع قيمة في قائمة باستخدام index():

$colors: red, green, blue, yellow;

$position: index($colors, blue); // 3
$not-found: index($colors, purple); // null

// فحص شرطي
@if index($colors, red) {
  .has-red {
    color: red;
  }
}

// إنشاء دالة contains
@function list-contains($list, $value) {
  @return index($list, $value) != null;
}

@if list-contains($colors, green) {
  .success { color: green; }
}

التكرار عبر القوائم

استخدام @each مع القوائم

المرور عبر عناصر القائمة لتوليد CSS ديناميكياً:

$sizes: small, medium, large;

@each $size in $sizes {
  .btn-#{$size} {
    padding: 0.5rem 1rem;
    font-size: 1rem;

    @if $size == small {
      padding: 0.25rem 0.5rem;
      font-size: 0.875rem;
    } @else if $size == large {
      padding: 0.75rem 1.5rem;
      font-size: 1.125rem;
    }
  }
}

التكرار مع الفهرس

أحياناً تحتاج إلى القيمة وموضعها معاً:

$colors: red, green, blue;

@each $color in $colors {
  $i: index($colors, $color);

  .color-#{$i} {
    background: $color;
    z-index: $i;
  }
}

// CSS المولّد:
// .color-1 { background: red; z-index: 1; }
// .color-2 { background: green; z-index: 2; }
// .color-3 { background: blue; z-index: 3; }

أنماط تكرار متقدمة

$names: primary, secondary, accent;
$colors: #3498db, #2ecc71, #9b59b6;

@each $name in $names {
  $i: index($names, $name);
  $color: nth($colors, $i);

  .bg-#{$name} {
    background-color: $color;
  }

  .text-#{$name} {
    color: $color;
  }
}

استيفاء السلاسل النصية

ما هو الاستيفاء؟

يتيح لك الاستيفاء إدراج قيم المتغيرات في السلاسل النصية باستخدام صيغة #{$variable}. هذا ضروري عندما تحتاج إلى توليد محددات أو أسماء خصائص أو أجزاء من قيم الخصائص ديناميكياً.

$side: left;
$size: 20;

.element {
  margin-#{$side}: #{$size}px; // margin-left: 20px
  border-#{$side}-color: red;  // border-left-color: red
}

// بدون استيفاء (خطأ)
// .element {
//   margin-$side: $size px; // هذا لن يعمل!
// }

الاستيفاء في المحددات

توليد أسماء الفئات والمعرفات ومحددات السمات ديناميكياً:

$theme: dark;

.theme-#{$theme} {
  background: #333;
  color: #fff;
}
// النتيجة: .theme-dark { ... }

// توليد محددات متعددة
$states: hover, focus, active;

@each $state in $states {
  .button:#{$state} {
    outline: 2px solid blue;
  }
}
// النتيجة: .button:hover, .button:focus, .button:active

// محددات السمات
$data-attr: status;
$value: active;

[data-#{$data-attr}="#{$value}"] {
  color: green;
}
// النتيجة: [data-status="active"] { color: green; }

الاستيفاء في أسماء الخصائص

إنشاء أسماء خصائص ديناميكية بناءً على المتغيرات:

$sides: top, right, bottom, left;

@each $side in $sides {
  .no-margin-#{$side} {
    margin-#{$side}: 0;
  }

  .border-#{$side} {
    border-#{$side}: 1px solid #ddd;
  }
}

// mixin اتجاهي
@mixin spacing($property, $direction, $value) {
  #{$property}-#{$direction}: $value;
}

.element {
  @include spacing(margin, top, 20px);    // margin-top: 20px
  @include spacing(padding, left, 10px);  // padding-left: 10px
}

الاستيفاء في قيم الخصائص

بينما لا يكون ضرورياً عادةً للقيم البسيطة، فإن الاستيفاء مفيد لربط السلاسل النصية:

$image-path: "/images/";
$filename: "hero.jpg";

.hero {
  background-image: url("#{$image-path}#{$filename}");
  // النتيجة: url("/images/hero.jpg")
}

// سلاسل المحتوى
$heading: "Welcome";

.banner::before {
  content: "#{$heading} to our site";
  // النتيجة: content: "Welcome to our site"
}

// دمج الوحدات
$size: 16;
$unit: px;

.text {
  font-size: #{$size}#{$unit}; // 16px
}

الاستيفاء في استعلامات @media

بناء استعلامات وسائط ديناميكية مع الاستيفاء:

$breakpoint: 768px;
$query-type: min-width;

@media (#{$query-type}: $breakpoint) {
  .container {
    max-width: 720px;
  }
}
// النتيجة: @media (min-width: 768px) { ... }

// mixin استعلام وسائط مرن
@mixin respond($condition, $value) {
  @media (#{$condition}: $value) {
    @content;
  }
}

.element {
  width: 100%;

  @include respond(min-width, 768px) {
    width: 750px;
  }

  @include respond(max-height, 600px) {
    height: auto;
  }
}

الاستيفاء في التعليقات

تضمين قيم المتغيرات في التعليقات للتوثيق:

$version: "2.1.0";
$author: "Development Team";

/*
 * Theme Version: #{$version}
 * Author: #{$author}
 * Generated: #{inspect(selector-parse(".test"))}
 */

// في CSS المجمع:
/*
 * Theme Version: 2.1.0
 * Author: Development Team
 * Generated: .test
 */

متى تستخدم الاستيفاء مقابل المتغيرات المباشرة

// ✓ صحيح: متغير مباشر في القيمة
.element {
  color: $primary-color;
  width: $container-width;
  margin: $spacing-md;
}

// ✗ خطأ: استيفاء غير ضروري
.element {
  color: #{$primary-color};
  width: #{$container-width};
}

// ✓ صحيح: استيفاء في المحدد
.theme-#{$theme-name} {
  background: $bg-color;
}

// ✓ صحيح: استيفاء في اسم الخاصية
.element {
  margin-#{$side}: 20px;
}

// ✓ صحيح: استيفاء لربط السلاسل النصية
.element {
  background-image: url("#{$path}/#{$filename}");
}

// ✓ صحيح: استيفاء في استعلامات الوسائط
@media (min-width: #{$breakpoint}) {
  ...
}

أمثلة عملية

مثال 1: مولد نظام الشبكة

$columns: 1, 2, 3, 4, 6, 12;

@each $col in $columns {
  .col-#{$col} {
    width: percentage(1 / $col);
    flex: 0 0 percentage(1 / $col);
  }
}

// توليد فئات الإزاحة
@each $col in $columns {
  @if $col < 12 {
    .offset-#{$col} {
      margin-left: percentage($col / 12);
    }
  }
}

مثال 2: أحجام الأيقونات

$icon-sizes: (
  xs: 12px,
  sm: 16px,
  md: 24px,
  lg: 32px,
  xl: 48px
);

@each $name, $size in $icon-sizes {
  .icon-#{$name} {
    width: $size;
    height: $size;
    font-size: $size;
  }
}

مثال 3: أدوات الحالة

$states: success, warning, error, info;
$state-colors: #2ecc71, #f39c12, #e74c3c, #3498db;

@each $state in $states {
  $i: index($states, $state);
  $color: nth($state-colors, $i);

  .alert-#{$state} {
    background-color: lighten($color, 40%);
    border-left: 4px solid $color;
    color: darken($color, 20%);
  }

  .badge-#{$state} {
    background-color: $color;
    color: white;
  }

  .text-#{$state} {
    color: $color;
  }
}

الملخص

في هذا الدرس، أتقنت:

• إنشاء قوائم SASS بفواصل مسافات وفواصل
• الوصول إلى عناصر القائمة باستخدام nth() والتحقق من الطول باستخدام length()
• إضافة عناصر باستخدام append() ودمج القوائم باستخدام join()
• إيجاد العناصر باستخدام index() وإنشاء دوال مساعدة
• التكرار عبر القوائم باستخدام @each لتوليد CSS
• استيفاء السلاسل النصية باستخدام صيغة #{$variable}
• استخدام الاستيفاء في المحددات وأسماء الخصائص والقيم
• استعلامات الوسائط الديناميكية مع الاستيفاء
• متى تستخدم الاستيفاء مقابل المراجع المباشرة للمتغيرات
• أنماط عملية لتوليد فئات الأدوات المساعدة

القوائم والاستيفاء هي أدوات قوية لإنشاء أوراق أنماط ديناميكية وقابلة للصيانة. تمكّنك من توليد أنماط CSS متكررة بكفاءة، وبناء أنظمة أدوات مساعدة مرنة، وإنشاء مكونات قابلة لإعادة الاستخدام تتكيف بناءً على التكوين. جنباً إلى جنب مع حلقات @each، تشكل أساس سير عمل تطوير SASS الحديثة.