Sass Variables

Variables are an important feature in the SASS language. Variables are declared in one place to store the values and can be used in the same value in multiple places.

This improves reusability and uniform style design across the multiple modules and files for bigger projects. This enables Declare variable with value once and, reuse many times.

In real-time projects, all the variables are declared in a single file, and imported these files in multiple files and modules, if you change the variable value once, the changes are reflected in all places whenever the variables are used.

Variables in sass are declared using the Dollar($) symbol.

Variable Advantages

  • Reusability
  • declare or update once, change in multiple places
  • uniform style design
  • clear separation of components when multiple teams are working

rules:

  • variable names which contain a hyphen(-) or underscore)(_) are interchangeable
  • Variable declaration and assignment must end with a semicolon
  • variable scope is nested only
  • can be used as a property names
  • variable values are overwritten by a new value.

The syntax is the same for SASS or SCSS except for the global syntax definition.

Variable definition syntax

$variable-name:variable-value;

Variables are prefixed with the dollar symbol and separated by colon with the value of the variable, the end of the line must be semicolon(:) symbol

In the below example, the color-blue variable is declared and assigned with the value blue.

$color-blue:blue;

whenever blue color is required, We can reuse the value across multiple places

p{
background: $color-blue;
}

When the sass compiler complies with the above codes, variables are replaced with their values in CSS snippets, The output is a CSS file with the below content as follows

p {
  background: blue;
}

color variables assigned other variables

Instead of assigning values, we can also assign other variables.

$font-color:red;

$link-color:$font-color;

h2{
color: $font-color
}
a{
color: $link-color
}

Generated CSS output after compilation

h2 {
  color: red;
}

a {
  color: red;
}

multiple font values assigned to a single variable

values can be color strings or numbers but also can be assigned with multiple values

$primary-font:("Sans",'Muli');


h2{
font-family: $primary-font
}

output is

h2 {
  font-family: "Sans", "Muli";
}

interpolation with CSS properties names

variables also can be used as HTML property names using interpolation syntax #{}

Enclose the variable with parenthesis prefixed with a hash symbol

Example

$primary-font:("Sans",'Muli');

$name: wrapper;
$attribute:border;

li.#{$name}{
#{$attribute}-radius:5px;
font-family:$primary-font;
}

compiled output css is

li.wrapper {
  border-radius: 5px;
  font-family: "Sans", "Muli";
}

Arithmetic operations on numbers not on strings

Arithmetic operations like division, addition, etc can be applied to variables of number types, operations on strings are not allowed

$height:1000px;
aside{
width :$height/3; // division operator
border-radius :ceil($height/3); // functions can be used
height: (1024px/3); // division
margin-right: 10px+4px/2px; // plus operation first, next division
font-size: 12px/4px; // Plain value, No athematic operation
}

Output is

aside {
  width: 333.3333333333px;
  border-radius: 333px;
  height: 341.3333333333px;
  margin-right: 12px;
  font-size: 12px/4px;
}

SASS constants

sass modules define the predefined variable, called constants, these variables are not changed and act as constants For example, the math module has variables called constants which are not changeable, and can only be used in multiple places.

@use "sass: math" as math;
// this will give compilation failure
math.$e: 0;

The compilation gives a failure message.

Error: Cannot modify the built-in variable.

SASS variables Scope

Scope is the usage of a variable at multiple places with limitations. It can be default or global scope Variables are scoped in the nested level of their declaration.

Variables can be of two types

  • Global variable is declared with! global keyword, ie global scope
  • local variables are declared under block-level ie declared inside parenthesis{} over written top variable value

Default scope variable usage:

Global variables can be overwritten with the local variable of the same name Example

$primary-color: green;// global variable

.h1 {
  $primary-color: blue; // local variables
  background-color: $primary-color;
}

.p {
  background-color: $primary-color;
  }


.h1 {
  background-color: blue;
}

.p {
  background-color: green;
}

Global variable scope usage:

$primary-color: green;// global variable

.h1 {
  $primary-color: blue !global; // local variables
  background-color: $primary-color;
}

.p {
  background-color: $primary-color;
  }

And output generated

.h1 {
  background-color: blue;
}

.p {
  background-color: blue;
}