This content originally appeared on DEV Community and was authored by Cess
Hello everyone! 💙
In this article, I will write about CSS Variables, scoping CSS Variables, and how they can help you to create better, and more maintainable CSS.
let's get started 💃
CSS Variables are sometimes referred to as CSS Custom properties or Cascading Variables. They allow information to be maintained and referenced in many locations. They make it easy to read and understand code especially when the code was done by someone else.
A good way to use CSS variables is when it comes to the colors of your design. Instead of copy and paste the same colors over and over again, you can place them in variables.
DEFINING VARIABLES
Declaring a Variable is done using a Variable name that begins with a double hyphen (--), and a property value that can be any valid CSS value.
Example:
h1 {
--main-bg-color: #358597;
}
- CSS variables are case-sensitive:
--Main-Bg-Color and --main-bg-color are not the same. To prevent this confusion, avoid using capital letters in variable names.
- Use hyphen delimited strings like this:
--main-text-color instead of --maintextcolor when defining a string.
USING CSS VARIABLES
To use the CSS variables you must specify your CSS Variable name inside the var() function, in place of a regular property value.
The var() function is used to insert the value of a CSS variable.
The syntax of the var() function is as follows:
var(--name, value)
The variable name (must start with two dashes)
Value is Optional: The fallback value (used if the variable is not found)
Example 1:
h1 {
--main-text-color: white;
color: var( --main-text-color);
}
Example 1 contains the variable name alone.
Example 2:
h1 {
--main-text-color: white;
color: var( --main-text-color, red);
}
Example 2 contains the variable name and the fallback value(red).
SCOOPING VARIABLES
Scope determines the range of the accessibility of the variable. Scope helps to store separate values, which come into play only when they are necessary.
Variables have two types of scope:
- Global Scope
- local Scope
GLOBAL SCOPE
Global scope is declared in :root pseudo-class. Declaring the variable in :root enables the variable to be accessed/used through out the entire document or globally across the entire HTML document.
To declare a variable in the global scope, you:
- Define the variable in a
:root{}pseudo class
:root {
--primary-color: #000;
--text-shadow: 2px 2px 1px white;
}
- Assign the variables to different child elements in your document
h1,h2 {
color: var(--primary-color);
text-shadow: var(--text-shadow);
}
Declaring a CSS variable on the :root pseudo-class and using it where needed throughout the document, will help you avoid repetition and it will be easier if you want to change the value across the entire page later.
It is common practice to define variables inside the :root but not mandatory
LOCAL SCOPE
The local scope would only affect the specific HTML element that it is declared in along with any children that the element may contain.
To create a variable with local scope, declare it inside the selector that is going to use it.
Example:
h1 {
--font-size: 18px;
--line-height-h1: 1.6;
font-size: var(--font-size);
line-height: var(--line-height-h1);
}
Remember that Global variables can be accessed/used throughout the entire document, while local variables can be used only inside the selector where it is declared.
HOISTING CSS VARIABLES
Like in JavaScript, CSS variables can be hoisted. This means that CSS variables can be used before they are declared.
Example:
body {
color: var(--font-color);
}
:root {
--font-color: orange;
}
As you can see in the above example, CSS variable --font-color was used before it was declared in the :root pseudo-selector, and the code works fine.
OVERRIDING CSS VARIABLES
You can override CSS Variables like every other CSS property.
Example:
:root {
--btn-color: red;
}
button {
--btn-color: white;
color: var(--btn-color);
padding: 2em;
}
In the above example, the button text color will be white.
I set the
--btn-color: red;on the:rootpseudo-class meaning I want my button text color to be redI wasn't okay with the red color for my button so I changed:
--btn-color: red; to --btn-color: white; on the button selector meaning my button text color will be white instead of the red color I set on the :root{} pseudo class.
Overriding the CSS variable is cool, yeah? be careful not to overuse this as you are defeating the main purpose of CSS variables if you are going to be overriding them.
I will tell you to change the value from the :root pseudo-class or assign a different variable.
USE OF MULTIPLE VARIABLES
You are not limited to use a single var() in your declarations.
Example
:root {
--padding: 10px 20px;
}
div {
padding: var(--padding);
}
DECLARING A VARIABLE WITHIN A VARIABLE
You can also declare a variable within another variable.
:root {
--background-color: orange;
--border: 1px solid var(--background-color);
}
button {
border: var(--border);
}
FALLBACK VALUES
Fallback values are used if the variable value given as the first argument isn't defined or has an invalid value.
Example 1:
body {
background-color: var(--main-background-color, green);
}
If --main--background-color is not defined or declared, the color of the background will be green.
Example 2:
h1 {
color: var(--main-text-color, var(--text-color, green));
}
Notice any difference between **Example 1 and Example 2?**
Example 2 have more than one fallback value. In Example 2:
--text-coloris the fallback value for--main-text-color,greenis the fallback value for--text-colorColor will be green if ~--main-text-color~ and ~--text-color~ are not defined
I hope you understand?
Fallback values only accept two parameters, everything following the first comma is the second parameter. If the first parameter is provided the fallback will fail.
ADVANTAGES OF USING CSS VARIABLES
- Makes the code easier to read(understandable).
- Makes it much easier to change the color values.
- CSS variables can be declared anywhere, it is flexible.
- CSS variables help remove redundancy In code.
CONCLUSION
The ability to maintain and reference information in more than one location is a huge benefit of CSS variables. This allows us to easily update information and not have to go into every place we used that information. They also make it easier to read and understand code and they make it easier to work with other developers on a project.
If you have any questions about CSS variables, you can leave them in the comment section below and I'll be happy to answer every single one.
If you found this article helpful, please like and share it 💙.
That's all for today! 😁 You reached the end of the article 😍.
This content originally appeared on DEV Community and was authored by Cess
Cess | Sciencx (2021-10-23T22:30:43+00:00) What is CSS Variable – in simple terms. Retrieved from https://www.scien.cx/2021/10/23/what-is-css-variable-in-simple-terms/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.