如何在CSS中创建实用工具颜色类

我试图找出如何为我的颜色主题中的一组特定颜色创建一个实用程序类，以帮助消除不必要的代码，并且只需键入名称--ei-primary green--而不是颜色代码

比如说

.titleAbout {
color: primary-green;
}

我知道我可以用Sass和scss来做，但是有没有办法把它保存在我的css文件中呢。我正在开发我自己的wordpress主题，它希望它保留在css中

例如：在Sass.scss中，它将如下所示

// Delta Theme Colors 

$primary-green: #16571D;
$bg-green: #7fb985;
$title-Purple: #4E1282;
$primary-blue:#3051C7;
$primary-yellow: #F0AF13;
$primary-orange: #D66550; 

谢谢

您可以使用CSS自定义属性或所谓的变量。

• 申报使用

• 要使用它们，请使用

  var（-property name）

---

在下面的操作中检查它：

：根目录{
--原色蓝：#3051c7；
}
身体{
背景色：var（--原色蓝）；
}

可能值得研究CSS自定义属性-完美！谢谢，我在搜索时使用了错误的名称。

:root {
  --primary-green: #16571d;
  --bg-green: #7fb985;
  --title-Purple: #4e1282;
  --primary-blue: #3051c7;
  --primary-yellow: #f0af13;
  --primary-orange: #d66550;
}

background-color: var(--primary-orange);