Yogesh Chauhan's Blog

What’s the difference between variables in CSS and SCSS (Sass)?

in CSS & SCSS on May 7, 2021

Let’s understand variables in CSS first.

CSS Variables using the var() Function

In CSS, you can use two dashes (–) to define a variable and then var() function to use/insert the variable value.

CSS variables can have a local scope or a global scope.

This is how you can define variables in CSS:


--base-color: #ff4c4c;

This is how you can use it afterwards:


color: var(--base-color);

CSS variables have access to the DOM.

You can change the CSS variables based on CSS media queries or even using JavaScript.

CSS variables, same like Sass (SCSS) variables, reduce repetition.


CSS Variable Example

Differences between Sass (SCSS) and CSS Variables

Sass (SCSS) Variables are compiled into a regular value just like we saw the compiled CSS in this define SCSS variables example.

CSS variables are actually included in the output. If you inspect element in the example above, you’ll see the CSS variable in the browser.


Sass (SCSS) Variables can have only one value at a time while CSS variables can have different values for different elements using local scope.

Sass (SCSS) Variables are imperative while CSS variables are declarative.

That means Sass variables can be changes over time and you don’t need to worry about the previous instance where it was used, because it will keep the old value for previous instance and new value for the new instance.

In CSS, once you change the value of the variable, it will be applied to all instances where it was used making it a declarative.



Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to add Google Map in WordPress using ACF?WordPressHow to add multiple Columns in CSS like Bootstrap?CSSJavaScript: how to detect a browser using the user agent?JavaScriptDebugging in WordPress Part 3: SCRIPT_DEBUG and SAVEQUERIESWordPressA few HTML coding standards from WordPressHTMLSteps to Secure a VPNMiscellaneous