May 12, 2021 12:50 am GMT
Original Link: https://dev.to/hoanganhlam/quick-sass-cheat-sheet-2l4d
Quick Sass Cheat Sheet
See also
- http://sass-lang.com/documentation/Sass/Script/Functions.html
- http://sass-lang.com/documentation/file.SASS_REFERENCE.html#sassscript
- Sass Cheat Sheet
[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 1length($list)@each $item in $list { ... }
[Other features] Interpolation
.#{$klass} { ... } // Classcall($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
Original Link: https://dev.to/hoanganhlam/quick-sass-cheat-sheet-2l4d
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To