CSS: Pass values/parameters through class names

Question

I would like to know if there is the possibility of informing values through class names to be used as values in the properties of the same. Example:

.text-(color) {
color: (color);
}

The result would be:

.text-blue {
color: blue;
}

I read about pre-processors, I had never used, but until then I found nothing that refers to the solution of this doubt. Only a similar solution that is not yet supported by any browser: https://css-tricks.com/css-attr-function-got-nothin-custom-properties/#article-header-id-2

Answer 1

With pure CSS you can do using custom variables, it’s not exactly how you want but can help you

If you want a special color for the :hover, enough in the :root vc tb declare a color that will use in :hover, in case the var(--red), and in the p.azul:hover you change the value of --azul for var(--red)

See the example to better understand:

:root {
  --azul: blue;
  --red: red; /* cor do hover */
}

p.azul {
  color: var(--azul);
}

p.azul:hover {
  --azul: var(--red); /* muda a var Azul para ser a var da cor do Hover */
}

<p>lorem lorem</p>
<p class="azul">lorem lorem 1</p>
<p class="azul">lorem lorem 2</p>