This content originally appeared on DEV Community and was authored by Lâm
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 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
This content originally appeared on DEV Community and was authored by Lâm
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Lâm | Sciencx (2021-05-12T00:50:31+00:00) Quick Sass Cheat Sheet. Retrieved from https://www.scien.cx/2021/05/12/quick-sass-cheat-sheet/
" » Quick Sass Cheat Sheet." Lâm | Sciencx - Wednesday May 12, 2021, https://www.scien.cx/2021/05/12/quick-sass-cheat-sheet/
HARVARDLâm | Sciencx Wednesday May 12, 2021 » Quick Sass Cheat Sheet., viewed ,<https://www.scien.cx/2021/05/12/quick-sass-cheat-sheet/>
VANCOUVERLâm | Sciencx - » Quick Sass Cheat Sheet. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/12/quick-sass-cheat-sheet/
CHICAGO" » Quick Sass Cheat Sheet." Lâm | Sciencx - Accessed . https://www.scien.cx/2021/05/12/quick-sass-cheat-sheet/
IEEE" » Quick Sass Cheat Sheet." Lâm | Sciencx [Online]. Available: https://www.scien.cx/2021/05/12/quick-sass-cheat-sheet/. [Accessed: ]
rf:citation » Quick Sass Cheat Sheet | Lâm | Sciencx | https://www.scien.cx/2021/05/12/quick-sass-cheat-sheet/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.