css - 如何将颜色和边框颜色分解为单个 CSS 样式并将其应用于 CSS 样式的其他部分

Question

我在 Site.css 中有以下样式，它是 ASP.NET MVC4 站点的一部分

form label.error { font-size: 12px; color: #cc0000; }
form input:not([type="submit"]).error{ border-color: #cc0000; }
form select:not([type="submit"]).error{ border-color: #cc0000; }
.error { color: #cc0000; }

我想知道如何修改该文件以便能够更改 #cc0000; 而无需在每一行都更改它(在这种情况下排除用于验证错误的颜色)

类似的东西:

errorStyle {
    color: #cc0000 ;
    border-color: #cc0000;
}

然后像这样使用它:

form label.error { font-size: 12px; errorStyle }
form input:not([type="submit"]).error{ errorStyle }
form select:not([type="submit"]).error{ errorStyle }
.error { errorStyle }

这样，如果客户希望更改颜色，则更易于维护。

Answer 1

避免重复而不使用任何预处理器的一种简单方法是将 error 类(包含 color 的类)应用到 form 元素，然后使用 currentColor 来使用应用于父元素的相同颜色。

currentColor 是指向应用于元素的现有颜色的关键字。 Support for this keyword is pretty decent and it works in all major browsers except IE8 .

对于 border-color，the default value is always the same as the color applied to the element (这又与 currentColor 相同)因此我们也可以使用 inherit 作为值而不是 currentColor。 inherit 基本上告诉浏览器继承父级的边框颜色。

在下面的代码片段中，我为一个元素应用了 currentColor，为另一个元素应用了 inherit，以显示两者如何提供相同的输出。

form.error label {
  font-size: 16px;
}
form.error input:not([type="submit"]) {
  color: currentColor;
  border-color: currentColor;
}
form.error select {
  color: inherit;
  border-color: inherit;
}
.error {
  color: #cc0000;
}

<form class='error'>
  <label>Hello</label>
  <input type="text" />
  <select>
    <option>1</option>
  </select>
</form>

---

如果您还想将 error 类应用于单个元素(即，仅向有错误的元素添加红色边框和颜色)，那也是可能的。

form.error label.error {
  font-size: 16px;
}
form.error input:not([type="submit"]).error {
  border-color: currentColor;
}
form.error select.error {
  border-color: inherit;
}
.error {
  color: #cc0000;
}

<form class='error'>
  <label class='error'>Hello</label>
  <input type='text' class='error' />
  <select class='error'>
    <option>1</option>
  </select>
  <input type='text' />
</form>