빠른 Sass 치트 시트

또한보십시오

[기타 기능] 지도

$map: (key1: value1, key2: value2, key3: value3);

map-get($map, key1)

[기타 기능] 목록

$list: (a b c);

nth($list, 1)  // starts with 1
length($list)

@each $item in $list { ... }

[기타 기능] 보간

.#{$klass} { ... }      // Class
call($function-name)    // Functions

@media #{$tablet}
font: #{$size}/#{$line-height}
url("#{$background}.jpg")

[기타 기능] 조건부

@if $position == 'left' {
   position: absolute;
   left: 0;
}
@else if $position == 'right' {
   position: absolute;
   right: 0;
}
@else {
   position: static;
}

[루프] while 루프

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

[루프] 각 루프(중첩)

$backgrounds: (home, 'home.jpg'), (about, 'about.jpg');

@each $id, $image in $backgrounds {
  .photo-#{$id} {
    background: url($image);
  }
}

[루프] 각 루프(단순)

$menu-items: home about services contact;

@each $item in $menu-items {
  .photo-#{$item} {
    background: url('images/#{$item}.jpg');
  }
}

[루프] For 루프

@for $i from 1 through 4 {
  .item-#{$i} { left: 20px * $i; }
}

[기능 확인] 기능