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