Accesso alle impostazioni dell'elenco dei temi tramite la regola @each di SCSS

Sviluppatore
1

non riesco ad accedere a un’impostazione di lista in un file yml con un operatore SCSS @each ma non riesco a farlo funzionare per più di una voce di lista. il codice funziona come previsto con il valore predefinito “” o un elemento nella lista, ma non per più di uno.

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

questo sembra che dovrebbe essere abbastanza semplice, ma non appena aggiungo più di una voce alla lista, smette di funzionare ma senza errori. :thinking:

suggerimenti da guru del codice?

2

Ipotesi casuali:

Non l’ho testato, ma penso che le impostazioni dell’elenco siano delimitate da barre verticali |.

Potrebbe essere possibile che $setting nel tuo CSS sia uguale a something|something_else|etc. Potresti stampare il valore in qualche attributo CSS (o JS, il valore dovrebbe essere lo stesso) per esserne sicuro. :thinking:

2 Mi Piace
3

Sì, stavo giusto pensando a questo e mi chiedevo se dovessi separare quei valori di lista con uno script? Sospetto che stia trattando più elementi di una lista come una singola stringa.:thinking:

4

tra l’altro ho risolto la settimana scorsa. ho usato una funzione scss separatore di stringhe

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

usandolo in questi componenti qui:

grazie a @Don per il suggerimento :slight_smile:

5 Mi Piace
5

:exploding_head:

Ci ho provato ma non sono riuscito a capire che esistesse, è fantastico. :clap:

2 Mi Piace
6

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