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

...

希望这段代码对您有所帮助。

当选择器为通配符时，在属性值中使用当前标签名称

1 个答案: