Variables | Sass
Sass Variables
Sass Variables
Variables in Sass
Sass variables begin with a dollar ($) sign and assigned colon (:) sign.
Sass variables names treat hyphen (-) and underscore (_) as same, i.e.$bg-colorand$bg_colorrefer to the same variable.
Data Types
Data Types in Sass
Sass supports following 4 data types:
- Number
- String
- Color
- Boolean
- List
- Null
$variable: value;
$fontFamily:Verdana, Arial;
$color:gray;
$border:1px solid black;
$zIndex:10;
$favImg:url('favicon.ico');
body {
font-family: Verdana, Arial;
color: gray;
border: 1px solid black;
z-index: 10;
background-image: url("favicon.ico");
}
Variable Scope
Despite other programming languages, Sass variable scope is confied for variable value as well. For instance, in JavaScript if a variable declared at the start of a function and its value changed within if block, its value remain the same onwards until changed. This is not the case with Sass. If a variable declared in an outer block and value changed in inner block, the changed value is effective within that block only. Outside the block, value will be retain as it was before entring the previous block. Consider following example:
$color: orange;
body {
$color: green;
background: $color;
}
span{
background: $color;
}
body {
background: green;
}
span {
background: orange;
}
In the example above, what would be the color of span tag? Either green or Orange?
As $color: green; sets the value of $color within body{} rule, its effect will be within body tag only.
span rule inherits color from the main scope, thats why its color was orange.
Variable scope concept in Sass is different than most programming languages like C, Java, python, C# and JavaScript etc.
Look at another example:
$color: orange;
body {
$color: green;
background: $color;
p{
$color: yellow;
background: $color;
}
}
div {
$color: blue;
u{
$color: pink;
background: $color;
}
background: $color;
}
span{
background: $color;
}
body {
background: green;
}
body p {
background: yellow;
}
div {
background: pink;
}
div u {
background: pink;
}
span {
background: orange;
}
In the example above, what would be the color of div tag? Either blue or pink?
As $color: pink; sets the value of $color within u rule, its effect will be within u as well as div tag.
This behaviour seem to be somewhat ackward but this is how variable scope works with Sass.
To let understand the concept of variable scope in Saas, look into the following example:
$varColor: orange;
body {
$varColor: green;
color:$varColor;
div{
$varColor: blue;
color:$varColor;
p{
$varColor:yellow;
color:$varColor;
u{
$varColor:pink;
background: $varColor;
}
background: $varColor;
}
background: $varColor;
}
background: $varColor;
}
span{
background: $varColor;
}
body {
color: green;
background: pink;
}
body div {
color: blue;
background: pink;
}
body div p {
color: yellow;
background: pink;
}
body div p u {
background: pink;
}
span {
background: orange;
}
Global Scope
The variable's default behaviour of value assignment scope may be applicable globally.
!global switch
The !global switch makes the value global.
$color: orange;
body {
$color: green !global;
background: $color;
}
span{
background: $color;
}
body {
background: green;
}
span {
background: green;
}