Explain how to define a variable in SASS

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.

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.

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.

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.

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:

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