html - 如何将一个类中的颜色用作同一元素的第二个类中的背景色？

Question

对于我正在处理的元素，我们需要定义一组按钮。每个按钮都应具有相同颜色的边框和文本颜色以及透明背景。因此，蓝色按钮具有蓝色边框和蓝色文本，黄色按钮具有黄色边框和文本。

类定义为

.btn, a.btn {
   @apply .py-2 .px-4 .rounded .no-underline;

   &\:blue {
     @apply .bg-transparent .text-blue;

     &:hover {
       @apply .bg-transparent .text-blue-lightest;
     }
   }

   &\:yellow  {
     @apply .bg-transparent .text-yellow .border-2 .border-yellow;

     &:hover {
       @apply .text-blue-lightest .border-2 .border-blue-lightest;
     }
   }
...

我们就这样使用它们

<div class="btn btn:blue ...>...</div>

现在在某些情况下，我们有我们喜欢称之为“主按钮”的东西，它有一个填充颜色和一个白色文本。由于我们不想制作一套完整的主按钮，我们想尝试是否可以“继承”另一个类的颜色并将其用作背景颜色。在代码中:

<div class="btn btn:blue btn:primary ...">...</div>

所以我们希望 btn:primary 采用 btn:blue 的颜色并将其用作背景色并将文本设为白色。

我能够找到使用 currentColor 作为背景颜色的解决方案，但这会干扰属性 color: white;在 btn:primary 中，因为它将白色作为“currentColor”。我能找到的唯一解决办法是将按钮的文本包装在一个跨度内，并给它一个使文本变白的类。有什么方法可以通过仅定义一次 btn:primary 使其继承 btn:blue (或 btn:yellow 或 btn:red 或...)的颜色并通过不包装按钮使文本变白来实现此结果自己的标签内的文字？哦，我们正在使用顺风，认为这可能是有用的信息。

提前感谢您的宝贵时间和帮助!

Answer 1

除非我误解你的意思，否则没有好的方法来做你想做的事。 border 继承了 color，就像 currentColor 一样，因此您可以通过这种方式削减一些类要求。但是你需要把属性放在那里的某个地方，我不明白为什么 .primary span { color: white; 包装器情况对于实现您的最终目标而言并不理想。

以下面的代码片段为例，标记相对简单。最后，我包含了一个按钮，它通过滥用 :before 伪类并从按钮中删除文本内容来执行您想要的操作。出于 SEO 和可用性目的，您可能需要使用 .hack-button { font-size: 0; } 和 .hack-button:before { font-size: 12px; } 并在两个地方保留文本。

就我个人而言，我会坚持使用覆盖 currentColor 的简单包装器，而不是使用伪元素。您也可以使用一些 JavaScript 实现您想要的效果，但说实话，将按钮内容包装在一个 span 中并收工可能更容易。

.button,
.hack-button {
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid;
  display: inline-block;
  margin-bottom: 4px;
}

.primary { background: currentColor; }
.primary span { color: #fff; }

.blue  { color: #0095ee; }
.red   { color: #ee3300; }
.green { color: #009933; }
.gray { color: #ccc; }

.hack-button:before {
  content: attr(data-content);
  color: #fff;
}

<a class="button blue primary" href="#"><span>Blue Primary</span></a>
<a class="button blue" href="#"><span>Blue Secondary</span></a>
<br />
<a class="button red primary" href="#"><span>Red Primary</span></a>
<a class="button red" href="#"><span>Red Secondary</span></a>
<br />
<a class="button green primary" href="#"><span>Green Primary</span></a>
<a class="button green" href="#"><span>Green Secondary</span></a>
<br />
<a class="button gray primary" href="#"><span class="dark">Gray Primary</span></a>
<a class="button gray" href="#"><span>Gray Secondary</span></a>
<br />
<a class="hack-button blue primary" href="#" data-content="Hacked Primary"></a>