时间戳

首页 > 解决方案 > 变量中的 Sass 增量类

css - 变量中的 Sass 增量类

问题描述

Helo 我只是在学习 sass 并尝试通过循环来制作动态课程。我的代码就像这样

$col-width-1: 1/12*100%;
$col-width-2: 2/12*100%;
$col-width-3: 3/12*100%;
$col-width-4: 4/12*100%;
$col-width-5: 5/12*100%;
$col-width-6: 6/12*100%;
$col-width-7: 7/12*100%;
$col-width-8: 8/12*100%;
$col-width-9: 9/12*100%;
$col-width-10: 10/12*100%;
$col-width-11: 11/12*100%;
$col-width-12: 12/12*100%;

.col-1{
    width: $col-width-1;
}
.col-2{
    width: $col-width-2;
}
.col-3{
    width: $col-width-3;
}
.col-4{
    width: $col-width-4;
}
.col-5{
    width: $col-width-5;
}
.col-6{
    width: $col-width-6;
}
.col-7{
    width: $col-width-7;
}
.col-8{
    width: $col-width-8;
}
.col-9{
    width: $col-width-9;
}
.col-10{
    width: $col-width-10;
}
.col-11{
    width: $col-width-11;
}
.col-12{
    width: $col-width-12;
}

$columns: 12;
$padding-mini: 10px;

 @for $i from 1 through $columns {
        .col-#{$i} {
            width: calc(#{$col-width-#{$i}} - #{$padding-mini});
        }
    }

是否可以在循环内进行动态或增量变量？当我检查控制台时。此代码引起的错误：

width: calc(#{$col-width-#{$i}} - #{$padding-mini});

我在互联网上搜索，但我无法得到任何明确的解决方案。感谢您的回答

标签： csssass

解决方案

您不能使用 SASS动态引用变量。但是，由于所有变量都使用相同的计算，您可以简单地将其直接放入循环中：

$columns: 12;
$padding-mini: 10px;

@for $i from 1 through $columns {
   .col-#{$i} {
      width: calc(#{$i}/#{$columns}*100% - #{$padding-mini});
   }
}

你也可以这样写：

width: calc(#{$i/$columns}*100% - #{$padding-mini});

推荐阅读