SASS | Variables
This article includes information about how to define a variable in SASS and scope of a variable.
Prerequisite: Variables in CSS
Advantages of a variable:
- Reduces the repetition of the same thing again and again.
- We can perform mathematical operations over variable like +,-,/,* etc… , which makes our work lot more easier.
- Declaration of a variable in SASS: In SASS, you can define a variable by using $ symbol at the starting of the name of the variable and followed by its value.
- SCSS file:
$textcolor:
blue
;
$
size
:
10px
;
$border_changes:
1px
solid
rgba(
255
,
153
,
153
,
0.2
);
#para
1
{
color
: $textcolor;
font-size
: $size;
border
: $border_changes;
}
// You can also use other variables
// in the declaration of a variable
$border_changes
2:
1px
solid
$textcolor;
#para
2
{
color
: $textcolor;
font-size
: $size;
border
: $border_changes
2
;
}
chevron_rightfilter_none - Compiled CSS file:
#para
1
{
color
:
blue
;
font-size
:
10px
;
border
:
1px
solid
rgba(
255
,
153
,
153
,
0.2
);
}
#para
2
{
color
:
blue
;
font-size
:
10px
;
border
:
1px
solid
blue
;
}
chevron_rightfilter_none
- SCSS file:
- Understanding scope of a variable: SASS variables can be declared anywhere in the document before it is used.
- Global Variables: Variables, which are declared at the top of the file, are global i.e., you can use it anywhere in the document.
- Scoped Variables: Variables, which are declared in any block, are scoped i.e., you can not use it outside of the scope of the block.
- SASS file:
$global:
#FF0000
;
#para
1
{
$local:
#F0F000
;
color
: $
local
;
border
:
1px
solid
$
local
;
}
// You can not use $
local
outside
of its
// #para
1
{ }
block
.
// This will generate error
// saying
"undefined variable"
$global_onwards:
#00FEF0
;
h
1
{
// You can not use $
local
here
color
: $global;
// You can use $global_onwards,
border
:
1px
solid
$global_onwards;
}
chevron_rightfilter_none - Compiled CSS file:
There are more concepts on variables, like Shadowing of a variable, default value of a variable, Flow-control declaration of variables, that will be discussed in the next articles.