Is it possible to create predefined css values?

Question

How can I add predefined CSS values? As if it were a variable to store.

For example, a color (Hex or RGB) so that I could use in the rest of the document, so instead of typing the color value, I would just type the name of the "variable".

Answer 1

So far it is not possible to define values in the same way that we are used to declaring variables, at least not in a way cross-browser. One way to simulate this is to create classes that contain the properties that would be applied to the element, as shown by Chun.

Another alternative is to make use of preprocessors, but then I’d be running away from the theme of the question which is to declare values in the css file itself.

Well, there is one design in specification with the aim of making it possible to declare variables in sheets of styles, similar to the form that Less and Sass work. And the assignment of the value will be on account of the attribute var(), e. g: background-color: var(--meu-bg).

Firefox and Chrome already have implemented resource, but remember that it is still an experimental technology. In that article of the MDN there are more objective explanations about the reason for implementation and what problems it aims to solve.

---

_{Note: In Chrome this feature needs to be enabled by accessing the tab chrome://flags.}

---

If you are using Firefox, the snippet below will work and you can see the use of variables in action:

:root {
  --cor-links: red;
  --borda: 2px solid blue;
  --sombra: 0 0 10px 5px rgba(0,0,0,.5);
}

a {
  color: var(--cor-links)
}

div {
  border: var(--borda);
  box-shadow: var(--sombra);
}

<a href='#'>Meu Link vermelho</a>

<br><br>

<div>Meu div com borda azul e sombra.</div>

Answer 2

You can do this by creating specific classes for it.
For example, in your CSS create a class with the name preto, and with the value hex black:

.preto {color:#000;}

and in HTML just call the class as follows:

.preto {color:#000;}
.vermelho {color:#ff0000;}
/* e por aí em diante ... */

<div class="preto">Olá, eu sou uma classe com o texto com a cor preta</div>
<div class="vermelho">Olá, eu sou uma classe com o texto com a cor vermelha</div>

Answer 3

Yes, but not directly in CSS.

You must implement {LESS} or Saas to get.

These technologies support you to create variables and logics where these generate a css from predefined values.