How to create utility color classes in CSS

Question

I'm trying to figure out how to be able to create, what I think, is called a utility class for a particular set of colors in my color theme to help get rid of unnecessary code, and just be able to type the name -- ei - primary-green -- instead of the color code.

For example

.titleAbout {
color: primary-green;
}

I know I can do it with Sass and scss, but is there a way to keep it in my css file. I'm developing my own wordpress theme and it wants it to remain in a css.

For examples: in a Sass .scss it would look like this

// Delta Theme Colors 

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

Thanks!

Might be worth looking into CSS custom properties - https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties — Lakshya Thakur, Mar 06 '21 at 19:16

score 1 · Accepted Answer · answered Mar 06 '21 at 19:25

You can use CSS custom properties or so-called variables.

To declare them use

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

To use them use var(--property-name)

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

Check it in action below:

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

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

Documentation

How to create utility color classes in CSS

1 Answers1

You can use CSS custom properties or so-called variables.