The var CSS function can be used to insert the value of a custom property sometimes called a "CSS variable" instead of any part of a value of another property.
The var function cannot be used in property names, selectors or anything else besides property values. Doing so usually produces invalid syntax, or else a value whose meaning has no connection to the variable. Take the. Start by creating a project folder. In your terminal, you can run these commands one after the other. This will create a project folder called css-variables-pro.
Next, created a subfolder called button-variations and two files for the first project. The structure of this markup is pretty standard.
Notice how each button element has two classes: the btn class and a second class. The btn class contains the base styles for all the buttons and the variations come in where the individual modifier classes get access to their colors, which are defined at the :root level of the document. This is extremely helpful not just for buttons, but for other elements in your HTML that can inherit the custom properties. For example, if tomorrow you decide the value for the --error custom property is too dull for a red color, you can easily switch it up to f , and voila: all elements using this custom property are updated with a single change.
The light theme will take effect by default unless the user already has their system set to a dark theme. Open the css-variables-pro folder you created earlier. Inside the folder, create another folder for your second project and name it theming.
Or, you can use this command:. This part involves a bit of JavaScript. First, open your theme. This snippet represents a simple blog page with a header, a theme toggle button, a dummy article, and links to both the corresponding CSS and JavaScript files. This snippet can be divided into two main sections: the layout section and the custom properties section. The latter is what you should focus on. As you can see, the variables are applied above in the link, paragraph, heading, and article elements.
But, the value of the declared variable changes for each element as long as the element is specific enough. As you can see from the example above, CSS variables greatly extend the functionality of CSS and open up a whole new world of possibilities. However, there are a few things to keep in mind before completely embracing them. Once you introduce variables to CSS, you need to memorize the name of your variable and be able to understand it when you encounter it later on in your code.
This makes it harder to maintain your stylesheets months or years down the road as you have to keep referring to the beginning of the document or perhaps, even a different stylesheet altogether to remind yourself of what the variable represents. Those preprocessors allowed us to reuse certain bits of code and other features without worrying about backwards compatibility, browser support, or stylesheet maintenance.
However, they do come with the drawback of being static and lacking the ability to change. The newly-introduced CSS variables allow for more freedom, functionality, and creativity in our code and go beyond the abilities of preprocessors we are so used to by now. But, they are not entirely flawless either. By Brenda Stokes Barron. But should you immediately jump on board and apply them in all your projects from here on out? Brenda Barron is a writer from southern California specializing in business and technology.
More articles by Brenda Stokes Barron. Sponsored Linode. By DeveloperDrive Staff. As soon as we update them, whatever property has the value of the CSS variable gets updated as well.
So, with just a few lines of Javascript and the smart use of CSS Variables, we can make a theme switcher mechanism. I hope are enjoying this article. If you would like to get more articles about CSS and frontend development you can always sign up for my email list. Like almost all the things in CSS, the variables are also pretty straightforward and easy to use. Here are a few more tips that are not included in the examples, but are still very useful in certain situations:.
This value will be used if the custom property is not found:. CSS variables can be made conditional with media queries.
For example, the following code changes the value of the padding, based on the screen size:. They will not fix every problem you have in the CSS realm.
However, you can quickly tell they make your code more readable and maintainable. Also, they greatly improve the ease of change across large documents. So, what are you waiting for?
Give CSS variables a try and let me know what you think. I hope you have enjoyed this article and if you would like to get more articles about React and frontend development you can always sign up for my email list.
0コメント