What are CSS Variables?
 |
| CSS Variables |
When writing Cascading Style Sheets (CSS), there is need for organization of the code for readability and efficiency.
Achieving this organization calls for storing of reusable properties in a single place to access them whenever in need.
CSS variables or custom properties are a powerful feature in modern web development; they are user-defined values that can be set one time and reused many times within the codebase.
How To Use CSS Variables (Custom Properties)
To use CSS variables or custom properties, you have to define them using the -- prefix and access the properties values using the var( ) function.
How to Define and Use CSS Variables
Property names are prefized with --. Example, --property-name. The properties are defined within the :root selector. The :root selector targets the entire document.
Example
Defining the property in the root
Defining the property in the root
:root {
--background-color: red;
}
Accessing the property
body{
background: var(--background-color);
}
//The background color of the body will be red
--background-color: red;
}
Accessing the property
body{
background: var(--background-color);
}
//The background color of the body will be red
 |
| css variables defining and usage |
CSS Scope vs the Scope of CSS Variables
Perhaps you may ask, are CSS variables given more preference than the normal CSS?
Actually, how it works is the same way CSS properties are given preference. CSS variables follow the cascade and inherit just like other CSS properties.
Further, variable properties can be scoped to a particular element. This means that whatever is defined will only apply to that element and its children.
Check the example below.
 |
| css variables scoping |
Explanation of the code above.
In this example, the --main-bg-color property has been defined in the root. This means, the property value applies to all elements in the document.
In the .card element, var(--main-bg-color) has been used. However, instead of referencing to the earlier defined property of #f0f0f0, it will reference to the locally defined #fff.
This is an example of local scoping.
Also read:
Using Fallback Values With the Var( ) Function
In cases where the CSS variable has not been defined, user-defined fallback values can be defined to act in the place of the variable.
For example, I have not defined a background color in the css variable but I want it to be white, I would write a code like...
background-color: var(--btn-col, white);
 |
| CSS variables fallback |
How to Manipulate CSS Variables with JavaScript
CSS Variables can be changed dynamically using the following JavaScript code.
 |
| Changing css variables with javascript |
This example updates the
--primary-color variable to #e74c3c, and the changes are reflected immediately.Benefits of Using CSS Variables
- Consistency: Defining colors, font sizes, and other styles as variables ensures consistency across the website.
- Easier Maintenance: Changing a variable's value updates all instances where it’s used.
- Dynamic Updates: Variables can be easily updated using JavaScript to create dynamic themes.
How Does Preprocessor Variables Differ with CSS Variables?
 |
| sass vs less css |
CSS preprocessors like SASS and LESS also utilize variables, but here is how they differ from CSS Variables.
- CSS variables do not require compilation. They can be directly run by the browser.
- CSS variables can be dynamically updated using JavaScript.
- CSS variables follow the standard cascade inheritance rules.
Conclusion
CSS variables are essential for creating a maintainable and dynamic stylesheet.
Code readability and flexibility is greatly improved using CSS variables allowing the building of websites with ease.
إرسال تعليق