Acessando configurações da lista de temas via regra @each SCSS

Dev
1

estou tentando acessar uma configuração de lista em um arquivo yml com um operador SCSS @each, mas não consigo fazê-lo funcionar para mais de uma entrada de lista. o código funciona como esperado com o padrão “” ou um item na lista, mas não para mais de um.

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

isso parece que deveria ser algo direto, mas assim que adiciono mais de uma entrada à lista, para de funcionar, mas sem erros. :thinking:

alguma sugestão de gurus do código?

2

Adivinhações aleatórias:

Não testei, mas acho que as configurações de lista são delimitadas por barras verticais |.

Pode ser que $setting no seu CSS seja igual a something|something_else|etc. Você poderia exibir o valor em algum atributo CSS (ou JS, o valor deve ser o mesmo) para ter certeza. :thinking:

2 curtidas
3

Sim, eu estava pensando nisso e me perguntando se preciso separar esses valores de lista com algum script? Suspeito que ele esteja tratando vários itens de lista como uma única string.:thinking:

4

aliás, resolvi isso na semana passada. usei uma função scss separadora de strings

@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 {
  algum código de formatação css com cada $setting aqui;
}

usando isso nestes componentes aqui:

obrigado a @Don pela dica :slight_smile:

5 curtidas
5

:exploding_head:

Eu tentei mas não consegui descobrir que isso existia, isso é ótimo. :clap:

2 curtidas
6

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