MENU


Variables

You can assign values to variables and substitute them in the rules.
If you wish to cause substitution in the selectors or properties, you should use interpolation with #{$var}.
$color: blue;
$name: foo;
$attr: border;

p.#{$name} {
  #{$attr}-color: $color;
}

p.foo {
  border-color: blue;
}


Unless declared with !global, variables declared within a block enclosed by {...} are visible only within the block.
!global causes local variables to be global. !default assigns a value to the variable only if the variable has not been assinged before.
$color: blue;
p {
  $style: solid !global;
  border-color: $color;
}

$size: 5px !default;
$color: red !default;
#main {
  border: $size $style $color;
}

nav {
  $style: dotted;
  border-style:$style;
}

p {
  border-color: blue;
}

#main {
  border: 5px solid blue;
}

nav {
  border-style: dotted;
}


Sass supports seven main data types.
Numbers 1.5
30
12px
Strings "hello"
'world'
huh		 When using interpolation, quoted strings are unquoted.
Colors red
#2e5fa0;
rgba(100,200,50,0.5)
Booleans true
false
Nulls null
Lists 1.5em 1em 0 2em
Helvetica, Arial, sans-serif
1px 2px, 5px 6px
(1px 2px) (5px 6px)		 Useful for functions.
Maps (key1: value1, key2: value2) Maps must always be surrounded by parentheses and must always be comma-separated. 

$map: (key1: value1, key2: value2, key3: value3);