This blog will help you understand how to create CSS variables for color codes and fonts that you plan to use in your custom theme–based website. Creating variables saves time and keeps your code clean, because you don’t have to repeat the same color or font values again and again.
Open your theme style.css file and create following code:
You can give any variable name but best practice is to use alphabets
:root {
–variablename:variablevalue;
}
Example:
:root {
--primarycolor:#333333;
--primaryfont:'Roboto', sans-serif;;
}
Here I am using creating “primarycolor” variable with color code #333333 and primaryfont with font “Roboto”.
propertyname:var(–variablename)
Example: i am using color and font-family property
color:var(--primarycolor)
font-family:var(--primaryfont)
We can create multiple variables using same technique
:root {
–variablename1:variablevalue;
–variablename2:variablevalue;
–variablename3:variablevalue;
}
Note: We use :root. It means the variables we create have global scope
