Sass Other features

Maps

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

Lists

$list: (a b c);
nth($list, 1)  // starts with 1
length($list)
@each $item in $list { ... }

Interpolation

.#{$klass} { ... }      // Class
call($function-name)    // Functions
@media #{$tablet}
font: #{$size}/#{$line-height}
url("#{$background}.jpg")

Conditionals

@if $position == 'left' {
     position: absolute;
     left: 0;
}
@else if $position == 'right' {
     position: absolute;
     right: 0;
}
@else {
     position: static;
}
Comments