Skip to content
Related Articles

Related Articles

Explain how to define a variable in SASS

Improve Article
Save Article
Like Article
  • Last Updated : 09 Nov, 2021

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. 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 Hyphen ( – ) 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: This example illustrates the SASS variables which is compiled to CSS variables & defining its 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: This example illustrates the use of the SASS variables by compiling it 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:

Difference between Sass variable & CSS variables:

S.No.

SASS Variable

CSS Variable

1.

All the variables are compiled in Sass.

The variables is 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 its previous used values will remain the same.

The CSS variables are declarative ie., if we change the value of the variable then it will affect the both the values which is previous used values & later used values.

Reference: https://sass-lang.com/documentation


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!