Explain how to define a variable in SASS

Last Updated : 23 Jul, 2025

SASS is a short form of Syntactically Awesome Style Sheet which is an extension to Cascading StyleSheet (CSS). It is a preprocessor of CSS. It is compiled to CSS & is fully compatible with every version of CSS. Sass reduces the repetition of CSS and hence saves time. It allows using the variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. It helps to organize a complex & large structured stylesheet in a well-organized manner & hence facilitates the reusability of code.SASS variables are non-changeable, which means if the variables are redeclared the previous value remains unchanged, unlike CSS. Thus SASS variables are also known as imperative.SASS variables can have only one value at a time, which means they can't have different values of different elements. We can store the information related to numbers strings, lists, booleans, colors, and null in the SASS variables. It is an open-source free-to-use extension designed by Hampton Catlin and developed by Natalie Weizenbaum and Chris Eppstein in 2006.

Sass introduces several features that do not exist in CSS like variables that can be used to store data or information that you can use later. It is an important feature of Sass. In this article, we will learn how to define a variable in Sass & will understand its implementation through the example.

Sass Variables:

Sass variables are declared once to store data that can be reused whenever required.
If you modify the variable value once, the changes are reflected in all places whenever the variables are used.
In Sass, we can store data in multiple types such as Numbers, Strings, booleans, lists, nulls, etc.
Sass uses the dollar symbol ($) to declare a variable followed by the specified variable name and the value of that variable separated by a colon (:). The line must end with a semicolon (;). The variables can also be used with other values.
You can also use underscores ( _ ) or Hyphens ( - ) to declare descriptive variable names.
We can enhance the efficiency of Sass by performing multiple math operations on variables.

Syntax:

$var_Name : var-value;

Example: The below examples will demonstrate how to define variables in SASS.

Filename: style.scss

// Global variable declaration
$global__light: #f9f9f9;
$global__dark: #000;
$global__font: ("Poppins");
$global__f_size: 26;
$global__Max_width: 1280px;

div {
  $local__green: #00f034;
 
  // Global variable called
  color: $global__dark;
  border: 1px solid $local__green;
  font: $global__font;

  // Global variable called
  max-width: $global__Max_width;
}

$global_sky: #0000ff;

p {

  // Local variable declare
  $local__margin: 10px 5px 20px 0;
  color: $global__dark;
  border: 1px solid $global_sky;
  font-size: $global__f_size;

  // Local variable called
  margin: $local__margin;
}

Output: The generated CSS output will be:

Filename: style.css

div {

  /* Global variable called */
  color: #000;
  border: 1px solid #00f034;
  font-family: "Poppins";

  /* Global variable called */
  max-width: 1280px;
}

p {
  color: #000;
  border: 1px solid #0000ff;
  font-size: 26;

  /* Local variable called */
  margin: 10px 5px 20px 0;
}

/*# sourceMappingURL=style.css.map */

Example 1: This example illustrates the SASS variables which are compiled to CSS variables & defining their scopes.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Sass Variable</title>
    <style>
        div {
          
            /* Global variable called */
            color: #000;
            border: 1px solid #00f034;
            font-family: "Poppins";
          
            /* Global variable called */
            max-width: 1280px;
        }
        
        p {
            color: #000;
            border: 1px solid #0000ff;
            font-size: 26;
          
            /* Local variable called */
            margin: 10px 5px 20px 0;
        }
    </style>
</head>

<body>
    <div>Welcome to GeeksforGeeks</div>
    
<p>A Computer Science portal for geeks.</p>

</body>
</html>

Output:

Scope of a Sass variable: Like other languages, Sass also has the concept of scope. In Sass, you can declare the scope of variable in two ways those are as follows:

Global variables
Local variables

Examples: Here, we can see how we can use the scope of Sass variables.

Global Variable Scope: Global variables are declared at the top of the file and you can use them anywhere in the code. You can also use !global to declare a local variable as a global variable.

Filename: style.scss

// It is a global variable
$clr_primary: #a9a5f4;

div {

  // Local variable with global scope
  $clr_dark: #000 !global;
  background-color: $clr_primary;
}

p {
  background-color: $clr_dark;
}

And the generated CSS output will be:

Filename: style.css

div {

  // Here, clr_primary variable assigned
  background-color: #a9a5f4;
}

p {

  // Here, clr_dark variable assigned
  background-color: #000;
}

Local Variable: Variables, which are declared in block or with parenthesis {} ie., inside the curly braces, are local variables and you can't use them outside of the scope of that particular block.

If you try to use variable outside scope, this will generate an error saying "Compilation Error: Undefined variable", as shown below example.

div {
  $clr__dark: #000; // local variable
  background-color: $clr_dark;
}

p {

  // We cannot use this variable here.
  // It will throw an error.
  background-color: $clr_dark;
}

Style.scss:

div {

  // Local variable scope
  $clr_light: #f9f9f9;
  background-color: $clr_light;
}

p {

  // Local variable scope
  $clr_dark: #000;
  background-color: $clr_dark;
}

style.css: The generated CSS output will be:

div {

  // Here, clr_light variable assigned
  background-color: #f9f9f9;
}

p {

  // Here, clr_dark variable assigned
  background-color: #000;
}

Example 2: This example illustrates the use of the SASS variables by compiling them to CSS variables.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Sass Variable</title>
    <style>
    div {
        /* Here, clr_light variable assigned */
        background-color: #f9f9f9;
    }
    
    p {
        /* Here, clr_dark variable assigned */
        background-color: #000;
    }
    </style>
</head>

<body>
    <div>Welcome to GeeksforGeeks</div>
    
<p>A Computer Science portal for geeks.</p>

</body>
</html>

Output:

Example 3: In this example, using $Color: red !global; instead of $Color: red; will make it global and accessible throughout the stylesheet. Thus, all the text will red-colored. The default scope of the variable will be overridden by !global. It may not be used to declare a new variable.

HTML

<html>
<head>
    <title>SASS Variable Scope</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Welcome to GeeksforGeeks</h1>
    
<p>A computer science portal for geeks</p>

</body>
</html>

style.scss:

$Color: green;
h1 {
$Color: red !global;
color: $Color;
}
p{
color: $Color;
}

style.css: The generated CSS output will be:

h1{
 color : red;
}
p{
 color : red;
}

Output:

Note: Like !global, we can also use !default to assign the desired value if the variable isn't defined or its value is null.

Flow Control Scope: Using flow control scope, we can conditionally assign value to a variable. Variables don't shadow the other variables at the same level, however, they are just assigned to those values.

Example 4: In this example, we will see how to apply conditions to the variable and if the condition becomes true, we will assign a certain value to it.

HTML

<html>
<head>
    <title>SASS Flow Control Scope</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Welcome to GeeksforGeeks</h1>
</body>
</html>

SCSS Code :

$theme: true !default;
$color: green!default ;
@if $theme 
{
   $color: lighten($color,50%) ;
}
h1{
   color: $color; 
}

style.css: The generated CSS output will be:

h1 {
 color: #80ff80; /*50% lighter than green*/
}

Explanation: In this example, $theme is set to True, by default. Thus, the if-condition holds true and the color will lighten to 50% of its original value. As seen in the output, the green color is lightened by 50%.

Output:

Difference between SASS variable & CSS variables:

S.No.	SASS Variable	CSS Variable
1.	All the variables are compiled in Sass.	The variables are included in the CSS output & need not compile them.
2.	The Sass variables contain only one value at a time.	The CSS variables can contain different values for different elements.
3.	The Sass variables are imperative ie. if the values of the variables are changed that we have used then their previously used values will remain the same.	The CSS variables are declarative ie., if we change the value of the variable then it will affect both the values which are previously used values & later used values.