css - 如何在 CSS 中创建实用颜色类

Question

我试图弄清楚如何能够创建，我认为，在我的颜色主题中为一组特定颜色创建一个实用程序类，以帮助摆脱不必要的代码，并且能够输入名称 - - 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

Answer 1

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

• 声明他们使用

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

• 要使用它们，请使用var(--property-name)

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

---

在下面检查它：

:root {
  --primary-blue: #3051c7;
}

body {
  background-color: var(--primary-blue);
}

---

文档