通过 SCSS @each 规则访问主题列表设置

开发
1

我正在尝试使用 @each SCSS 运算符访问 yml 文件中的列表设置，但对于多于一个列表条目，它无法正常工作。代码在默认值 "" 或列表中有一个项目时按预期工作，但对于多个条目则不行。

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

随机猜测：

我没有测试过，但认为列表设置由竖线 | 分隔。

你 CSS 中的 $setting 可能等于 something|something_else|etc。你可以将该值输出到某个 CSS 属性（或 JS，值应该相同）来确保。:thinking:

2 个赞
3

是的，我正在考虑这个问题，并想知道是否需要用脚本来拆分这些列表值？我怀疑它将多个列表项视为一个字符串。:thinking:

4

btw 上周解决了这个问题。 使用了字符串分隔符 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.