Question

我展示了两种文本：一种是鲜艳的颜色（比如今天要做的事情），另一种颜色是深色（比如明天要做的事情）。我使用的解决方案是为相关的div容器分配一个类day和night，每个类都带有适当的颜色。

这适用于两种手工挑选颜色的二进制情况。

我现在想为这些信息文本添加彩色徽章（比方说，类别），并希望徽章反映“明亮”/“黑暗”二分法：当某些东西带有班级today时，它的徽章应该是更亮的颜色（对于班级tomorrow来说更暗）。

我当然可以为每个徽章创建两个类：cooking-today，cooking-tomorrow，important-today，important-tomorrow等 - 每个类都有手工制作的颜色。这很难扩展，我宁愿只通过添加一个类（可以将所有颜色修改为更暗的版本）自动完成“变暗”。

我不知道如何处理这个因为我认为颜色必须是硬编码的（在某种意义上说，CSS color:定义必须是特定的，并且不能基于另一个类的存在而动态计算）。我对HTML5 / CSS / JS的了解微乎其微，我很高兴出错。

Answer 1

好吧，如果您之前没有使用过Sass，那么这有点令人反感，但请看一下at my example on Codepen。 Sass是一个伟大的工具，以编程方式＆＃34;使用基色以这种方式调整颜色并输出所需的类。列表和循环是相当先进的概念。

Codepen示例输出为直接HTML / CSS

＆＃13;

.event--cooking {
  color: yellow;
  background-color: #333;
  border: 1px solid #e6e600;
}
.event--cooking.important {
  color: #b3b300;
}
.event--cooking.tomorrow {
  color: olive;
}

.event--sewing {
  color: grey;
  background-color: #333;
  border: 1px solid #737373;
}
.event--sewing.important {
  color: #5a5a5a;
}
.event--sewing.tomorrow {
  color: #404040;
}

＆＃13;

如何使颜色均匀变暗？

1 个答案: