Variables can be defined using the var function:

var(--custom-name, value)

The variable name must begin with two dashes (–) and is case sensitive

/*-------------------------*/
/*-------------------------*/
/*----- CSS VARIABLES -----*/
/*-------------------------*/
/*------------------------*/
:root {
  --color-main1: #06c;
  --color-text1: #CCC;
}
/*Using the defines within your css:
var(--color-main1)
var(--color-text1)
*/


.my_class_name {
  background-color: var(--color-main1);
}

Ensuring the values are available

If you don’t use the the root values in your page but want to use them in javascript then you can use this trick to ensure they are parsed ready to use:

/*Dummy class to ensure the variables are parsed and available to javascript if not used elsewhere*/
.__dummy-variable-usage {
  color: var(--odac-color-main1);
  color: var(--odac-color-main2);
  color: var(--odac-color-attention);
  display: none;
}