See also
[Other features] Maps
$map: (key1: value1, key2: value2, key3: value3);
map-get($map, key1)
[Other features] Lists
$list: (a b c);
nth($list, 1) // starts with 1
length($list)
@each $item in $list { ... }
[Other features] Interpolation
.#{$klass} { ... } // Class
call($function-name) // Functions
@media #{$tablet}
font: #{$size}/#{$line-height}
url("#{$background}.jpg")
[Other features] Conditionals
@if $position == 'left' {
position: absolute;
left: 0;
}
@else if $position == 'right' {
position: absolute;
right: 0;
}
@else {
position: static;
}
[Loops] While loops
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
[Loops] Each loops (nested)
$backgrounds: (home, 'home.jpg'), (about, 'about.jpg');
@each $id, $image in $backgrounds {
.photo-#{$id} {
background: url($image);
}
}
[Loops] Each loops (simple)
$menu-items: home about services contact;
@each $item in $menu-items {
.photo-#{$item} {
background: url('images/#{$item}.jpg');
}
}
[Loops] For loops
@for $i from 1 through 4 {
.item-#{$i} { left: 20px * $i; }
}
[Feature checks] Features
- global-variable-shadowing
- extend-selector-pseudoclass
- units-level-3
- at-error
Top comments (0)