This content originally appeared on DEV Community and was authored by Suraj Vishwakarma
Introduction
Defining a variable in the program helps us to store and modify. We can change the variable's value easily with one change. Variable are helpful in many scenarios.
CSS does support variable declaration and we are going to learn more about the variable declaration and utilization today.
So let's get started.
Defining the variable
We can declare a variable with two scopes i.e, global and local. Declaring a variable with a global scope can be accessed throughout the document. While with local, it is limited within the selector.
Global Declaration
Global are declared in a special selector : root. Within the selector, we define the variable as a double hyphen(--) followed by name of the variable.
:root{
--background: #f1f7fe;
--boderRadius: 10px;
}
Local Variable
The local variable will be defined and used within the same selector.
--background: #f1f7fe;
background-color: var(--background);
You can use this variable in the document with the var() function. You need to provide the name of the variable within the bracket.
body{
background-color: var(--background);
}
Overriding Variable
You can override i.e, change the value of a variable within a selector. This value will be valid within the same selector in which it will be defined.
:root{
--background: #f1f7fe;
--boderRadius: 10px;
}
div{
--background: #DD4847;
background-color: var(--background)
}
CSS Variable in JavaScript
CSS variable can be accessed and modified within the javascript. It can be accessed by the query selector.
let element = document.querySelector(':root')
You can get the value of the property with getPropertyValue() fucntion.
let background = element.getPropertyValue('--background')
You can change the value of this Variable with style.setProperty() function. It takes two values within the quotation marks separated by comma(,). The first value is the name of the variable and the second one is the updated value.
element.style.setProperty()
Example
We are going to change the color palette of the website by clicking on the button. Changing of color will be done in javascript.
index.html
We are having two containers. One for our color palette and the other for the button.
<div class="container">
<div class="circle two"></div>
<div class="circle three"></div>
<div class="circle four"></div>
</div>
<div>
<button id="palette1" onclick="palette1()">Color 1</button>
<button id="palette2" onclick="palette2()">Color 2</button>
<button id="palette3" onclick="palette3()">Color 3</button>
<button id="palette4" onclick="palette4()">Color 4</button>
</div>
style.css
We have used the CSS variable to define and use the variable in the stylesheet for defining the color palette of our webpage.
:root {
--one: #f9ed69;
--two: #f08a5d;
--three: #b83b5e;
--four: #6a2c70;
}
script.js
We will change the value of the variable when the user clicks on the button.
var element = document.querySelector(":root")
console.log("HEELO WORLD")
const palette1 = () => {
element.style.setProperty('--one', '#f9ed69')
element.style.setProperty('--two', '#f08a5d')
element.style.setProperty('--three', '#b83b5e')
element.style.setProperty('--four', '#6a2c70')
}
CodePen
Here is the Codepen of the App. You can change the color of the webpage by clicking on the button. By default Color 1 is active.
Last Note
That's it for CSS Variable for now. I hope you will try to use variables in your CSS.
Thanks for reading the blog post.
This content originally appeared on DEV Community and was authored by Suraj Vishwakarma
Suraj Vishwakarma | Sciencx (2022-01-15T16:54:55+00:00) Defining Variable in CSS with var(). Retrieved from https://www.scien.cx/2022/01/15/defining-variable-in-css-with-var/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.