CSS Variables and How To Use Them

Declaration and Usage

element {
--background-color: #f00;
}
element {
background-color: var(--background-color);
}
:root {
--primary-color: #333;
}
div {
color: var(--primary-color);
}
p {
background-color: var(--primary-color);
}
.fancy {
border-color: var(--primary-color);
}

Inheritance

<div class="parent">
<div class="first-child"></div>
<div class="second-child"><div>

</div>
.parent {
--text-size: 15px;
}
.first-child {
font-size: var(--text-size);
}
.second-child {
--text-size: 30px;
}

Fallback Values

.second-child {
font-size: var(--text-size, 30px);
}

Conclusion

Full stack developer. http://shahednasser.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store