Question

我正在使用bootstrap 4和sass。因此，我有一个html标签，其颜色通过span标签设置了颜色，例如

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

在我的sass中，当有人从html内更改标签的颜色（例如，从Badge-primary更改为Badge-danger）时，我如何做：my：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，但是我得到的只是白色，而不是蓝色。我该如何做到这一点，以便用户可以使用自举颜色，而我的前后自动选择该颜色？

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

前后如何通过tag属性从父级继承颜色

1 个答案: