我试图使用@for
循环使用可变宽度的SASS生成动态网格系统。到目前为止,我有:
@for $value from 1 through 12 {
$width: percentage(1/$value);
.col-md-#{$value} {
width: $width;
}
}
上述代码的输出为:
.col-md-1 {
width: 100%;
}
.col-md-2 {
width: 50%;
}
.
.
.
.col-md-11 {
width: 9.09091%;
}
.col-md-12 {
width: 8.33333%;
}
无论如何,通过以下方式修改百分比函数可以扭转这种情况:
.col-md-12 {
width: 100%;
}
和
.col-md-1 {
width: 8.33333%;
}
与我目前的情况相反。提前谢谢。
答案 0 :(得分:2)
对数学的简单改变应该可以解决问题:
@for $value from 1 through 12 {
$width: percentage($value/12);
.col-md-#{$value} {
width: $width;
}
}
结果:
.col-md-1 {
width: 8.33333%;
}
.col-md-2 {
width: 16.66667%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33333%;
}
.col-md-5 {
width: 41.66667%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33333%;
}
.col-md-8 {
width: 66.66667%;
}
.col-md-9 {
width: 75%;
}
.col-md-10 {
width: 83.33333%;
}
.col-md-11 {
width: 91.66667%;
}
.col-md-12 {
width: 100%;
}