sassを使ってCSSのめんどくさい繰り返し部分を楽に記述する
せっかく変数が使えるscssですもの。このくらいやってもらわなきゃ。
- .hoge {
- @for $i from 0 through 10 {
- li:nth-child(#{$i + 1}) {
- left: #{50 * $i}px;
- top: #{80 * $i}px;
- }
- }
- }
ベンダープレフィックスもこのとおり。
- .hoge {
- @each $prefix in -webkit-, -moz-, -ms-, -o-, ” {
- #{$prefix}border-radius: 4px;
- }
- }
これは便利。