الوصول إلى إعدادات قائمة السمات عبر SCSS @each rule

مطور
1

أحاول الوصول إلى إعداد قائمة في ملف yml باستخدام عامل تشغيل @each SCSS ولكن لا يمكنني جعله يعمل لأكثر من إدخال قائمة واحد. يعمل الكود كما هو متوقع مع القيمة الافتراضية “” أو عنصر واحد في القائمة، ولكن ليس لأكثر من ذلك.

settings.yml:

list_setting:
  type: list
  default: ""
  description: "a list setting"

scss:

@each $setting in $list_setting {
  some css formating code with each $setting here;
}

يبدو أن هذا يجب أن يكون مباشرًا إلى حد ما، ولكن بمجرد إضافة أكثر من إدخال واحد إلى القائمة، يتوقف عن العمل ولكن لا توجد أخطاء. :thinking:

أي اقتراحات من خبراء الكود؟

2

تخمينات عشوائية:

لم أختبره، لكن أعتقد أن إعدادات القائمة مفصولة بعلامات |.

قد يكون من الممكن أن $setting في CSS الخاص بك يساوي something|something_else|etc. يمكنك إخراج القيمة في سمة CSS معينة (أو JS، يجب أن تكون القيمة هي نفسها) للتأكد. :thinking:

إعجابَين (2)
3

نعم، كنت أفكر في هذا وأتساءل عما إذا كان عليّ فصل قيم القائمة هذه بنص برمجي؟ أظن أنه يعامل عناصر القائمة المتعددة كسلسلة نصية واحدة.:thinking:

4

بالمناسبة، تم حل هذه المشكلة الأسبوع الماضي. تم استخدام دالة فاصل السلاسل النصية في scss

@function str-to-list($string, $separator, $startAt: 1) {
  $item: str-slice($string, $startAt);
  $list: ();
  $index: str-index($item, $separator);

  @if $index ==null {
    $list: ($item);
  }

  @else {
    $list: (str-slice($item, 1, $index - 1));
    $list: join($list, str-to-list($item, $separator, $startAt: $index + 1));
  }

  @return $list;
}

$list: str-to-list("#{list_setting}", "|");

@each $setting in $list {
  some css formating code with each $setting here;
}

باستخدامها في هذه المكونات هنا:

شكراً لـ @Don على النصيحة :slight_smile:

5 إعجابات
5

:exploding_head:

لقد حاولت ولكن لم أتمكن من معرفة وجود هذا، هذا رائع. :clap:

إعجابَين (2)
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.