Zugriff auf Theme-Listeneinstellungen über SCSS @each rule

Entwickler
1

Ich versuche, mit einem @each SCSS-Operator auf eine Listeneinstellung in einer YML-Datei zuzugreifen, aber es funktioniert nicht für mehr als einen Listeneintrag. Der Code funktioniert wie erwartet mit dem Standardwert “” oder einem Eintrag in der Liste, aber nicht für mehr.

settings.yml:

list_setting:
  type: list
  default: ""
  description: "eine Listeneinstellung"

scss:

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

Das scheint ziemlich einfach zu sein, aber sobald ich mehr als einen Eintrag zur Liste hinzufüge, funktioniert es nicht mehr, aber es gibt keine Fehler. :thinking:

Irgendwelche Vorschläge von Code-Gurus?

2

Zufällige Vermutungen:

Ich habe es nicht getestet, aber ich glaube, Listeneinstellungen werden durch senkrechte Striche | getrennt.

Es könnte sein, dass $setting in Ihrem CSS gleich something|something_else|etc ist. Sie könnten den Wert in einem CSS-Attribut (oder JS, der Wert sollte derselbe sein) ausgeben, um sicher zu sein. :thinking:

2 „Gefällt mir“
3

Ja, ich habe gerade darüber nachgedacht und mich gefragt, ob ich diese Listenwerte mit einem Skript aufteilen muss? Ich vermute, dass es mehrere Listenelemente als eine einzige Zeichenkette behandelt.:thinking:

4

btw letzte Woche gelöst. eine String-Separator-SCSS-Funktion verwendet

@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;
}

verwendet in diesen Komponenten hier:

danke an @Don für den Tipp :slight_smile:

5 „Gefällt mir“
5

:exploding_head:

Ich habe es versucht, konnte aber nicht herausfinden, dass es das gibt, das ist großartig. :clap:

2 „Gefällt mir“
6

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