当selector是通配符时，在属性值中使用当前标记名称

Question

我想知道如何使用sass在content属性值中使用当前标记名称。

像这样的东西：

*:before {
    /* ... */
    content: mytagname
}

我已经设法通过向我的标记添加数据标记属性并将其名称作为值来绕过此问题，并在css中获取它，如下所示：

<p data-tag='p'> blablabla </p>

*:before {
    /* ... */
    content: attr(data-tag)
}

如果没有数据标记技巧，是否存在实现这一目标的方法？

谢谢 ！

Answer 1

正如我评论你可以使用mixin：

@mixin tag-before($parent: '') {
  $tags: a abbr acronym address applet area article aside audio b base basefont bdo big blockquote body br button canvas caption center cite code col colgroup datalist dd del dfn div dl dt em embed fieldset figcaption figure font footer form frame frameset head header h1 h2 h3 h4 h5 h6 hr html i iframe img input ins kbd label legend li link main map mark meta meter nav noscript object ol optgroup option p param pre progress q s samp script section select small source span strike strong style sub sup table tbody td textarea tfoot th thead time title tr u ul var video wbr;
  @each $tag in $tags {
    #{$parent} #{$tag}:before {
      content: '#{$tag}';
    }
  }
}

@include tag-before(#content);

这将生成以下css：

#content a:before {
  content: "a";
}

#content abbr:before {
  content: "abbr";
}

#content acronym:before {
  content: "acronym";
}

#content address:before {
  content: "address";
}

...

我希望这段代码可以帮到你。