As we are creating multiple CSS files CSS in the website which has so many duplicate constant values for different tags.
For example,
h1 {
color: #fefefe;
}
So it will be static value for the page or website.
Can it be possible that without a usage of HTML, jQuery or PHP? we can use this value as variable and access it from that variable within the same or subpages also.
It will be really helpful if we any new trick to solve this doubt.
It’s really good thing to use variables in CSS files to reduce repeat constantly.
To use a variable in CSS file. Please follow step by step tutorial:
- Define a variable in CSS root.
- Access variable with var() in CSS files.
Example: To define a variable in CSS root
:root {
--border-color: #e8e8e8;
--h2-color:#1A237E;
}Now, It will create two variables with a name of –border-color,–h2-color.
Next Step is to access these variables in same CSS file or a different one file.
Example :
.block {
border: 2px solid var(--border-color);
}