scss 为 css 类提供 .里面

【问题标题】：scss providing css classes with . insidescss 为 css 类提供 .里面
【发布时间】：2020-05-27 21:00:02
【问题描述】：

我在 scss 中有一个 for 循环，我想输出如下内容：

.font-1.0em {font-size:1.0em} 
.font-1.1em {font-size:1.1em} 
.font-1.2em {font-size:1.2em} ....

我把scss写成这样

@for $i from 1 through 50 {
    $val: $i + em;

    $val2: $i / 10 + em;

    &.font-#{$val} {
        font-size: #{$val2} ;
    }
}

哪个输出

.font-10em {font-size:1.0em} 
.font-11em {font-size:1.1em} 
.font-12em {font-size:1.2em} ....

有没有办法解决这个问题？

【问题讨论】：

【解决方案1】：

通过使用与$val2 相同的公式和$val 来解决您想要实现的目标应该相当容易

@for $i from 1 through 50 {
    $val: $i / 10 + em;

    $val2: $i / 10 + em;

    &.font-#{$val} {
        font-size: #{$val2} ;
    }
}

编译成

.font-0.1em {
    font-size: 0.1em;
}

.font-0.2em {
    font-size: 0.2em;
}

还是我错过了什么？

【讨论】：