我正在通过循环创建一些实用程序类,但不想使用已存在的函数。
我在其他CSS中使用了一些函数:
@function size-1() {
@return #{ ( 8 / 16 ) }rem;
}
@function size-2() {
@return #{ ( 16 / 16 ) }rem;
}
@function size-3() {
@return #{ ( 24 / 16 ) }rem;
}
@function size-4() {
@return #{ ( 32 / 16 ) }rem;
}
但我也创建了一个循环,以便我也可以在标记中使用类:
@for $i from 1 through 18 {
.mt-#{$i} {
margin-top: size-$i();
}
}
我已尝试(上图)动态调用该函数,但它只输出' size-1'如果我动态地做如果我使用直接函数名称,例如:
margin-top: size-1();
然后它正确工作。我有什么方法可以做到这一点吗?
答案 0 :(得分:2)
使用函数call给你打电话:
@function size-1() {
@return #{ ( 8 / 16 ) }rem;
}
@function size-2() {
@return #{ ( 16 / 16 ) }rem;
}
@function size-3() {
@return #{ ( 24 / 16 ) }rem;
}
@function size-4() {
@return #{ ( 32 / 16 ) }rem;
}
...
@for $i from 1 through 18 {
.mt-#{$i} {
margin-top: call(size- + $i);
}
}
(测试于:https://www.sassmeister.com/)
编辑:功能较少的另一种方式:
@function size($num) {
@return #{ ( $num/2) }rem;
}
@for $i from 1 through 18 {
.mt-#{$i} {
margin-top: size($i);
}
}