How to create utility color classes in CSS [duplicate]

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 - developer.mozilla.org/en-US/docs/Web/CSS/… — Lakshya Thakur
– Lakshya Thakur, Commented Mar 6, 2021 at 19:16

Manas Khandelwal · Accepted Answer · 2021-03-06 19:25:49Z

1

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

answered Mar 6, 2021 at 19:25

Manas Khandelwal

3,9442 gold badges15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create utility color classes in CSS [duplicate]

1 Answer 1

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

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

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

Comments

Linked

Related