SASS @for循环从特定值到数值的增量

Question

我需要使用SASS的@for循环为我的类设置特定的高度。我想@mixin的输出是这样的：

.class-1 { 
    height: 45px; 
} 

.class-2 { 
    height: 55px; 
} 

.class-3 { 
    height: 65px; 
} 

.class-4 { 
    height: 75px; 
} 

这个例子是接近，但我想不出我应该使用在45月底开始在75什么计算和迭代每个值由20：

@for $i from 0 through 3 { 
    $value: ($i + 2) * 20; 
    .test-#{$i + 1} { height: $value; } 
} 

Answer 1

以下@for循环生成您想要的CSS：

SCSS：

@for $i from 1 through 4 { 
    .class-#{$i} { 
    height: 35px + ($i * 10); 
    } 
} 

息率CSS：

.class-1 { 
    height: 45px; 
} 

.class-2 { 
    height: 55px; 
} 

.class-3 { 
    height: 65px; 
} 

.class-4 { 
    height: 75px; 
}