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,…


This content originally appeared on DEV Community and was authored by Lâm

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


This content originally appeared on DEV Community and was authored by Lâm


Print Share Comment Cite Upload Translate Updates
APA

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/

MLA
" » Quick Sass Cheat Sheet." Lâm | Sciencx - Wednesday May 12, 2021, https://www.scien.cx/2021/05/12/quick-sass-cheat-sheet/
HARVARD
Lâm | Sciencx Wednesday May 12, 2021 » Quick Sass Cheat Sheet., viewed ,<https://www.scien.cx/2021/05/12/quick-sass-cheat-sheet/>
VANCOUVER
Lâ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.

You must be logged in to translate posts. Please log in or register.