How to define variable in SASS

Answer

Sass allows variables to be defined. Variables begin with a Dollar sign ($). Variable assiment is done with a colon(:)

SassScript supports four data types:

Numbers(including units)
Strings (with quotes or without)
Colors (name, or names)
Boolens

Variables can be arguments to or results from one of several available function During translation, the values of the variables are inserted into the output CSS document.

In SCSS style

$blue: #3bbfce;
$margin: 16px;
 
.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 20%);
}
 
.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

Or SASS style

$blue: #3bbfce
$margin: 16px
 
.content-navigation
  border-color: $blue
  color: darken($blue, 9%)
 
.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $blue

Would compile to:

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}
 
.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

All sass Questions

Ask your interview questions on sass

Write Your comment or Questions if you want the answers on sass from sass Experts

*Name :**
*Email Id :**
*Mob no :**
Question Or Comment* :