Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 12, 2021 12:50 am GMT

Quick Sass Cheat Sheet

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 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:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To