更智能的CSS颜色变化

我正在构建一个网站，通过简单的CSS更改，我可以轻松地替换多个元素的颜色。然而，我遇到了一个缺乏知识的问题，当涉及到我正在研究的特定元素时：

CSS：

.et_pb_toggle_0.et_pb_toggle.et_pb_toggle_close {
background-color: rgba(225, 30, 30, 1) !important; /* REPLACE THIS COLOUR */
border-bottom-color: rgba(225, 30, 30, 1) !important; /* REPLACE THIS COLOUR */
border-left-color: rgba(225, 30, 30, 1) !important; /* REPLACE THIS COLOUR */
border-right-color: rgba(225, 30, 30, 1) !important; /* REPLACE THIS COLOUR */}

因为所有这些都使用相同的颜色，有没有更聪明的方法来写这篇文章来组合它们，所以我只替换一次颜色？我试着将逗号、空格、分号组合起来，但似乎不起作用

我之所以必须使用单独的边框项，是因为这是为了覆盖现有的CSS，CSS定义了边框，而不仅仅是一个边框

任何帮助都将不胜感激。谢谢，蚂蚁

使用CSS变量

:root {
  --main-color: rgba(225, 30, 30, 1);
}
.et_pb_toggle_0.et_pb_toggle.et_pb_toggle_close {
background-color: var(--main-color) !important; 
border-bottom-color: var(--main-color) !important; 
border-left-color: var(--main-color) !important; 
border-right-color: var(--main-color) !important;
}

这里有一个参考

使用CSS变量

:root {
  --main-color: rgba(225, 30, 30, 1);
}
.et_pb_toggle_0.et_pb_toggle.et_pb_toggle_close {
background-color: var(--main-color) !important; 
border-bottom-color: var(--main-color) !important; 
border-left-color: var(--main-color) !important; 
border-right-color: var(--main-color) !important;
}

---

这里有一个参考

welcom to SO，尝试使用CSS预处理器（SASS，LESS等）并将颜色定义为全局变量welcom to SO，尝试使用CSS预处理器（SASS，LESS等）并将颜色定义为全局变量值得指出参考底部的浏览器兼容性部分-Internet Explorer不支持此功能，这可能是一个问题，取决于你的观众。这是真正美丽的，正是我需要的那种东西。非常感谢geeksamu。IE是一个小问题，但我环顾了一下，似乎我应该为每个项目定义一个备用颜色。值得指出的是，该参考底部的浏览器兼容性部分-Internet Explorer不支持此功能，这可能是一个问题，取决于你的观众。这是真正美丽的，正是我需要的那种东西。非常感谢geeksamu。IE是一个小问题，但我环顾了一下，似乎我应该为每个项目定义一个备用颜色。