備忘。
CSSのclassを連番にするときなど、いちいちコピペするとソースも無駄に増えるうえ、面倒くさい。Sassなら数行で済む。
出力結果
こんな感じで、連番のclassや値をを自動生成したいとき。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .radius-5 { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; } .radius-10 { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } .radius-15 { -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; border-radius: 15px; } |
Sassの記述
for文でぶん回せばOK。
1 2 3 4 5 6 7 8 9 10 11 | @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } @for $i from 1 through 3 { .radius-#{$i * 5} { @include border-radius(5px * $i); } } |
この例だと、$iが1〜3になるまで繰り返される(1 through 3の部分)。つまり「1×5」「2×5」「3×5」が繰り返される。
他の応用技
例えばこんなことも。
出力結果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | .col1 { width: 100%; } .col2 { width: 50%; } .col3 { width: 33.33333%; } .col4 { width: 25%; } .col5 { width: 20%; } .col6 { width: 16.66667%; } .col7 { width: 14.28571%; } .col8 { width: 12.5%; } |
Sass
上のようなスタイルを生成したいときも、これだけ書けばOK。
1 2 3 4 5 | @for $i from 1 through 8 { .col#{$i} { width:(100% / $i); } } |
