SASS variables

This tutorial covers variables defining and using it across styles in sasss..

Sass Variables

Variables are the important feature in SASS language. Generally, Variables are declared at once place to store the values, can be used the same value in multiple places, This improves reusuability and unifrom 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 single file, import this files in multiple files and modules, if you change the variable value once, the changes are reflected to all places whenever the variables are used,

Variables in sass are declared using Dollar symbol

Advantages

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

rules

  • varible names which contains hyphen(-) or underscore)(_) are interchangable
  • Variable declarationa nd assignment must end with semicolon
  • variable scope is nested only
  • can be used as a property names
  • variable values are overwritten by new value Syntax is same for SASS or SCSS except global syntax defination

Variable defination syntax

$variable-name:variable-value;

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

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

$color-blue:blue;

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

p{
background: $color-blue
}

When sass compiler complied the above codes, variable are replaced with their values in csss snippets, The output is csss file with 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 single variable

values can be color strings or number 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 parenthsis prefixed with hash symbol

Example

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

$name: wrapper;
$attribute:border;

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

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

Arthmatic operations on numbers not on strings

Arthematic 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 divisiotn font-size: 12px/4px; // Plain value, No arthematic operation } Output is

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

constants

sass modules defines the predefined variable, called constants, these variables are not changed act as constants For example math module variables are not changable, can only used in multiple places

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

Compilation gives failure message

Error: Cannot modify built-in variable.

Scope

Scope is the usage of variable at multiple places with limitiations. It can be default or global scope Variables are scoped in nested level of its declaration. Variables can be of two types Global variable are declared with !global keyword, ie global scope local variables are declared under block levelie declared inside parenthesis{} overrwritten top variable value

Default usage

Global variables can be overwritten with local variable of 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 keyword usage

$primary-color: green;// global variable

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

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

.p {
  background-color: blue;
}

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

ES7 features

Prev Next