Getting started with CSS variables
Tags: css, beginners, javascript
Published: 2019-11-13 17:07:04

---
title: Getting started with CSS variables
published: true
description: Introduction to CSS variables.
tags: CSS, beginners, JavaScript
cover_image: https://source.unsplash.com/4oAFasAPftg/1600x900
canonical_url: https://gopikrishna.dev/blog/css-variables
---


_This article was originally published on my [blog](https://bgopikrishna.me/blog/css-variables). Feel free to check it out_

If you have used SASS or other CSS preprocessors, you might have already used Variables. CSS variables (also referred as custom properties) are the native implementation of them in the browser.

CSS variables need to be declared with `--` prefix to the name.

```css
:root {
	--primary-color: #eaefed;
    --text-color: #001100;
}
```

When we want to access them, we just need to use the `var` function.  The first argument of the `var` function is the name of the variable. If the variable is invalid, we can pass the fallback value as the second argument.

```css
.link {
	border: 1px solid var(--primary-color);
    color: var(--text-color, #111000); 
    /* if --text-color is invalid,fallback value #111000 is used */
}
```

### Scope of the Variable

The scope of the CSS variable is the scope of the selector it is defined. For global scope, we can either declare them in `:root` or `body` selector.

For example, let's declare a variable named `--btn-danger-color` in a class `btn` . If you try to access the variable `--btn-danger-color` in another class out of its scope, it will be invalid. Because the scope of  `--btn-danger-color` is only in `btn` class

```css
.btn {
	--btn-danger-color: #FF4136;
    background-color: var(--btn-danger-color);
}
.link {
    background-color: var(--btn-danger-color, green); 
    /* Background color is green because --btn-danger is invalid */
}
```


### Accessing  and Modifying CSS Variables with JavaScript

To access or modify CSS variables via JavaScript, we can use two methods

* getPropertyValue
* setProperty

### Getting the CSS Variable Value

To get the value of the CSS variable, we can use `getPropertyValue` method

```js
const btn = document.querySelector('.btn');

let btnDangerBg = getComputedStyle(element).getPropertyValue("--btn-danger-color"); 

console.log(btnDangerBg); // #FF4136 - value of the css variable defined in .btn class in CSS
```

To get the CSS variables declared in `:root`, you can use `document.querySelector(':root');`

### Changing the CSS Variable Value

To set the value of the CSS variable from JavaScript we can use `setProperty` method.

```javascript
  element.style.setProperty("--variable-name", value)
```

Let's write a small function to change the `Button` background colour to purple by using `setProperty` method.

```javascript
function changeColorToPurple(){
   //Set the CSS variable value
  btn.style.setProperty("--btn-danger-color", "purple")
}
```

Don't forget to link it with HTML.

```html
<button class="btn" onclick="changeColorToPurple()">Change Color</button>
```



### Demo

I'm adding an embedded [repl](https://repl.it/@bgopikrishna/CssVariables) for the above code So that you can play with it.

{% replit @bgopikrishna/CssVariables %}


Thank You.    

### Reference

[CSS custom properties ](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) - MDN  
	
		[Every thing you need to know about CSS variables](https://www.freecodecamp.org/news/everything-you-need-to-know-about-css-variables-c74d922ea855/)