时间戳

首页 > 解决方案 > 创建长长的 CSS 数据属性选择器列表

css - 创建长长的 CSS 数据属性选择器列表

问题描述

我在使用 Stylus 从名称列表中创建一长串 css3 选择器时遇到了很多麻烦。无论我如何尝试格式化此块：

@-moz-document domain("example.com") {
  friends = name name1 name2 name3

  for user in friends
      div[data-user={user}] > .chat-line__message--badges
          padding-left: 20px
          background-repeat no-repeat
          background-position-x 0px
          background-size 14px

  for user in friends
      div[data-user={user}]
          background-color rgba(0, 0, 255, .2)!important
}

解析器总是向我抛出以下错误：

ParseError: stylus:322:2 
318| 
319| for user in friends 
320| div[data-user={user}] 
321| background-color rgba(0, 0, 255, .2)!important 
322| } ---------^ unexpected "}"

它说意外的“}”，但“}”用于关闭@-moz-document 部分，当我删除“}”时，它返回另一个关于到达 EoS 的错误。

如果有更简单的方法来创建如下所示的一长串选择器，我愿意学习。

div[data-user=user1],
div[data-user=user2],
div[data-user=user3],
...
div[data-user=userN]{
  background-color: blue;
}

标签： cssstylus

解决方案

所以解决方案是双重的：

首先，我忘记了代码的 [data-user="{$var}"] 部分中的引号。

其次，Stylus 扩展似乎不能很好地与缩进编码配合使用。我为所有内容添加了括号，一切都很好。

推荐阅读