sassを使ってCSSのめんどくさい繰り返し部分を楽に記述する

せっかく変数が使えるscssですもの。このくらいやってもらわなきゃ。

  1. .hoge {
  2.     @for $i from 0 through 10 {
  3.         li:nth-child(#{$i + 1}) {
  4.             left: #{50 * $i}px;
  5.             top:  #{80 * $i}px;
  6.         }
  7.     }
  8. }

 

ベンダープレフィックスもこのとおり。

  1. .hoge {
  2.     @each $prefix in -webkit-, -moz-, -ms-, -o-,  {
  3.         #{$prefix}border-radius: 4px;
  4.     }
  5. }

これは便利。

参考:sassを使ってCSSのめんどくさい繰り返し部分を楽に記述する