この記事は約2分11秒で読めます
widthやmargin、paddingの設定で、10%、15%、20%など、5刻みや10刻みで大量に書くことがありますよね。
そんなときはこれです。
下記のように書きます。
table.std {
@for $value from 1 through 20{
.width_#{$value * 5} {
width:5% * $value;
}
すると一気に、下記のものが書き出されます。非常に便利です。
table.std .width_5 {
width: 5%; }
table.std .width_10 {
width: 10%; }
table.std .width_15 {
width: 15%; }
table.std .width_20 {
width: 20%; }
table.std .width_25 {
width: 25%; }
table.std .width_30 {
width: 30%; }
table.std .width_35 {
width: 35%; }
table.std .width_40 {
width: 40%; }
table.std .width_45 {
width: 45%; }
table.std .width_50 {
width: 50%; }
table.std .width_55 {
width: 55%; }
table.std .width_60 {
width: 60%; }
table.std .width_65 {
width: 65%; }
table.std .width_70 {
width: 70%; }
table.std .width_75 {
width: 75%; }
table.std .width_80 {
width: 80%; }
table.std .width_85 {
width: 85%; }
table.std .width_90 {
width: 90%; }
table.std .width_95 {
width: 95%; }
table.std .width_100 {
width: 100%; }