sass里写百分比宽度

发表于 | 阅读次数:
阅读时长 ≈ 1

最近在用sass，记下一例：

在css里写这样的代码是比较容易的，

1
.w10{width:10%}

但是在sass里,如果我要用循环

1
2
3
4
5
@for $i from 1 to 10 {
.wp#{$i}0 {
   width: #{$i}%;
}
}

这样就报错了，
变量后不能用%，
想了很多办法，用引号引住%,或者加/\，但是不管用，
说来说去，这里毕竟还是css，并不识别这些符号为注释符号。

看到函数这节，豁然开朗，写了如下

1
2
3
4
5
6
@function per($a){@return $a+'%';}
@for $i from 1 to 5 {
.wp#{$i} {
   width: per(#{$i});
}
}

运行生成：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.wp1 {
  width: 1%;
}

.wp2 {
  width: 2%;
}

.wp3 {
  width: 3%;
}

.wp4 {
  width: 4%;
}

Ok了

真正正确的写法应该是如此：

1
2
3
@for $i from 1 through 20 {
.wp#{$i*5} {width: 5%*$i;}
}