Question

给出一个字符串$prefix=Note和一个列表$attributes = a b c，哪个SCSS循环会产生这种情况？ —

 ::before {content: "Note " attr(a) " " attr(b) " " attr(c)}

这篇较早的帖子（concatenate strings using sass）使我很接近，但我仍然无法正确。

编辑

这种作品，但我不知道为什么。

note {
  $attributes: a b c;
  $pre: '' "Note";
  $space: '' " ";
  &::before { 
    $content: $pre;
    @each $attribute in $attributes {
      $content: $content + $space + " attr(" + $attribute + ")";
    }; 
    content:  #{$content}; 
  }
}

它产生

note::before {
  content: "" "Note""" " " attr(a)"" " " attr(b)"" " " attr(c);
}

由于浏览器会忽略""，因此浏览器将正确处理。

但这是一个未被理解的黑客。正确的方法是什么？

Answer 1

确实有趣的字符串！您可以尝试这种方式。

note {
  $attributes: a b c;
  $pre: 'Note';
  $space:"' '";
  &::before {
    $content:"";
    @each $attribute in $attributes {
      $content: $content + $space + attr($attribute);
    }
    content:$pre #{$content};
  }
}

希望有帮助！：-）

将列表项连接到带引号的属性值中

1 个答案: