We've already determined that CSS Flexbox is super cool, so let's look at mixing in another super cool CSS tool. Custom Properties (also known as CSS Variables or Cascading Variables) are entities that allow you to assign a value in one location and then simply call it as a variable everywhere else. So, changing the value in one place changes it everywhere the var() function refers to the property, no more Find and Replace needed!
Basically this is a two part operation:
- You define the value of the custom CSS property (eg. --color1: #ff00ff;, --width: 25%; or --box-padding: 10px;)
- You refer to this value within the var() function throughout your CSS (eg. color: var(--color1);, width: var(--width);, padding: var(--box-padding);)
So they are not really variables, but custom properties. For the sake of understanding, this tutorial will use both definitions.
You can create multiple custom property values, and use them across multiple stylesheets, using the @import rule, for example. Another use case is to apply CSS variables within media queries, to alter the layout and make it responsive.
This tutorial will explain the use of CSS variables (custom properties) with CSS Flexbox, by creating a grid-like layout.
Let’s start!
