Accès aux paramètres de la liste de thèmes via la règle SCSS @each

Dev
1

j’essaie d’accéder à un paramètre de liste dans un fichier yml avec un opérateur SCSS @each mais je n’arrive pas à le faire fonctionner pour plus d’une entrée de liste. le code fonctionne comme prévu avec la valeur par défaut "" ou un seul élément dans la liste, mais pas pour plusieurs.

settings.yml :

list_setting:
  type: list
  default: ""
  description: "un paramètre de liste"

scss :

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

cela semble assez simple, mais dès que j’ajoute plus d’une entrée à la liste, cela cesse de fonctionner sans aucune erreur. :thinking:

des suggestions de gourous du code ?

2

Devinettes aléatoires :

Je ne l’ai pas testé, mais je pense que les paramètres de liste sont délimités par des barres verticales |.

Il est possible que $setting dans votre CSS soit égal à quelque chose|quelque_chose_d_autre|etc. Vous pourriez afficher la valeur dans un attribut CSS (ou JS, la valeur devrait être la même) pour en être sûr. :thinking:

2 « J'aime »
3

oui, je pensais justement à ça et je me demandais s’il fallait que je sépare ces valeurs de liste avec un script ? je soupçonne qu’il traite plusieurs éléments de liste comme une seule chaîne de caractères. :thinking:

4

au fait, j’ai résolu ça la semaine dernière. j’ai utilisé une fonction scss de séparation de chaînes de caractères

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

je l’utilise dans ces composants ici :

merci à @Don pour le tuyau :slight_smile:

5 « J'aime »
5

:exploding_head:

J’ai essayé mais je n’ai pas pu découvrir que cela existait, c’est génial. :clap:

2 « J'aime »
6

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