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作为背景颜色的解决方案但这会干扰属性颜色：白色;在btn：primary中，因为它将白色作为“currentColor”。我能找到的唯一工作就是将一个按钮的文本包装在一个范围内，然后给它一个使文本变白的类。有没有办法我只能通过定义btn：primary来实现这个结果，以便它继承btn：blue（或btn：yellow或btn：red或...）的颜色并通过不包裹按钮使文本变白文本里面有自己的标签？ Ow，我们正在使用顺风，认为这可能是有用的信息。

提前感谢您的时间和帮助！

Answer 1

除非我误解你，否则没有一种好的方式来做你想做的事。 border继承color，就像currentColor一样，因此您可以按照这种方式修改某些类要求。但是你需要将属性放在某处，我不明白为什么.primary span { color: white; }包装器的情况不是理想的，无法实现最终目标。

拿下面的代码片段，标记相对简单。最后，我添加了一个按钮，通过滥用:before伪类并从按钮中删除文本内容来实现您想要的功能。出于搜索引擎优化和可用性的目的，您可能需要使用.hack-button { font-size: 0; }和.hack-button:before { font-size: 12px; }并将文字保留在两个位置。

就个人而言，我坚持使用一个简单的包装器来覆盖currentColor而不是使用伪元素。你也许可以用一些JavaScript实现你想要的东西，但实际上，将一个按钮内容包装在一个跨度中并且称它为一天可能更容易。

.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>

如何在同一个元素的第二个类中使用一个类中的颜色作为背景颜色？

1 个答案: