前后如何通过标签属性从父级继承颜色答案

【问题标题】：how can before and after inherit color from parent via tag attribute前后如何通过标签属性从父级继承颜色
【发布时间】：2019-01-25 21:33:06
【问题描述】：

我正在使用 bootstrap 4 和 sass。所以我有一个通过 span 标签设置颜色的 html 标签，就像这样......

<div class="non-semantic-protector">    
   <span class="badge badge-primary">testing</span>
</div

在我的 sass 中，当一个人从 html 中更改标签的颜色（例如，badge-primary 到 badge-danger）时，我如何做到这一点，我的 :before 和 :after 使用输入的相同颜色通过标签？

这是我的 sass 代码...

.non-semantic-protector { position: relative; z-index: 1; }

span.badge {
  position: relative;
  display: inline-block;
  text-align: center;
  padding: 0.5em 1em;
}

span.badge {
  &:after, &:before {
    content: '';
    position: absolute;
    border-style: solid;
  }
  &:after, &:before {
    top: 0em;
    right: -1em;
    border-width: 1em 1em 1em 3em;
    border-color: currentColor transparent currentColor currentColor;
    z-index: -1;
  }
}

我正在尝试使用 currentColor，但我得到的只是白色而不是引导蓝色。我怎样才能做到这一点，以便用户可以使用引导颜色，并且我的前后自动拾取该颜色？

【问题讨论】：

您可以覆盖引导程序的badge-variant mixin，例如添加border-color: $bg transparent $bg $bg;，然后在您的&::after, &::before 规则中使用border-color:inherit;。我没有测试它，但我认为它应该可以工作。

标签： sass bootstrap-4

【解决方案1】：

根据spec，currentColor是color属性的值。

在 Bootstrap 4 中，badge-primary 类的样式为：

.badge-primary {
    color: #fff;
    background-color: #007bff;
}

正确地，在这种情况下，currentColor 等于 #fff，这是该元素的给定颜色值。

不幸的是，除非您在 ::before 或 ::after 伪元素中明确要求这样的内容，否则您不会免费获得 Bootstrap 蓝色：

.badge-primary::before {
    background-color: inherit;
}

【讨论】：