This content originally appeared on Level Up Coding - Medium and was authored by David Sands
When it comes to CSS, it is easy to get lost when an application has the same color or the same border radius in multiple places, and you (or your client) decide a change is needed. Suppose you have the same color in hundreds of different places and decide that it needs to be darker; what do you do? Find and replace? Track them down by hand?
Thankfully, CSS has a great solution for this: CSS variables (sometimes referred to as custom properties). CSS variables are excellent for making quick updates to specific properties, DRYing up your CSS file, and making your code more intuitive to other developers (prima facie, --primary-color is more descriptive than #3f1314).
I have created this simple welcome page to demonstrate how to implement CSS variables in your code. Feel free to play around in the style.css file while you continue to read, as it will give you a better idea of how custom properties work in an application.
What are CSS variables?
CSS variables are custom properties defined within a style sheet that can be cascaded down to child elements. Whenever a custom property is declared, you are actually making a new property that can be used within your application. Since this isn’t a standard property like “padding”, we need to let the browser know what the new property is. We can do this by declaring our new property within a selector:
Breaking it down.
The first thing you might notice in the above example is the “:root” selector. Root is a pseudo-class selector that refers to the document’s root element (the <html> element in most cases). However, even though it is used to select the <html> element, root has a higher level of specificity. It is usually best practice to declare your custom properties within the :root pseudo-class as this will allow the variables to be accessed anywhere in the document.
Now that we know what the root selector is, let’s talk about the syntax being used. In order to declare your new custom variables, you will need to use what is called “custom property notation”. This notation consists of two dashes, the name of the variable, and the value of the variable (e.g., --name: value;).
Once we declare our variables in our root element, we can access them from anywhere in our document. Let’s take a look at the button selector to see how we can access these properties.
As shown above, we are accessing our --primary-clr and our --secondary-clr properties via the var() function within the linear-gradient() function. Since our custom properties were declared in our root element, we can access them in any of our selectors.
By declaring and calling our custom properties in this way, we can make global updates to these variables all from our root element:
By changing the --secondary-clr to blue, not only did we change the button color, but we also changed the border color as it was also utilizing the --secondary-clr property.
BONUS: using the calc() function with CSS variables.
If we don’t want our main border and our button to have the same border-radius, but we still want them to be proportional, we can use the calc() function. Lets take a look at the button selector again, specifically the border-radius property:
border-radius: calc(var(--br) / 2 );
We can wrap the var() in a calc() function to perform a calculation on the custom property. In this case, we are dividing it by two. By adding this calculation, the main border will maintain a border-radius of 1rem while the button radius will be calculated to 0.5rem .
TL;DR
- CSS variables help to DRY up your CSS file and make it easier to update styles across the entire application.
- CSS variables are usually declared within the :root pseudo-class selector for global access.
- In order to let the browser know about our custom properties, we need to define them using custom property notation.
- We can access these properties by using the var() function.
CSS Variables was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by David Sands
David Sands | Sciencx (2022-03-22T01:25:02+00:00) CSS Variables. Retrieved from https://www.scien.cx/2022/03/22/css-variables-4/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.