分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了在 SCSS 中使用 @for 用逗号分隔的不同类，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决在 SCSS 中使用 @for 用逗号分隔的不同类？

开发过程中遇到在 SCSS 中使用 @for 用逗号分隔的不同类的问题如何解决？下面主要结合日常开发的经验，给出你关于在 SCSS 中使用 @for 用逗号分隔的不同类的解决方法建议，希望对你解决在 SCSS 中使用 @for 用逗号分隔的不同类有所启发或帮助；

我想使用 SCSS 在下面渲染这个 CSS：

.aem-GrID.aem-GrID--1>.aem-GrIDcolumn.aem-GrIDcolumn--offset--default--1,.aem-GrID.aem-GrID--default--1>.aem-GrIDcolumn.aem-GrIDcolumn--offset--default--1,.aem-GrID.aem-GrID--2>.aem-GrIDcolumn.aem-GrIDcolumn--offset--default--2,...
..
. {
    margin-left: $pc-100;
}

在下面使用这个@for：

@for $i from 1 through 12 {
    .aem-GrID.aem-GrID--#{$i}>.aem-GrIDcolumn.aem-GrIDcolumn--offset--default--#{$i} {
        margin-left: $pc-100;
    }
}

但是这段代码呈现所有分离：

.aem-GrID.aem-GrID--1 > .aem-GrIDcolumn.aem-GrIDcolumn--offset--default--1 {
  margin-left: 100%;
}

.aem-GrID.aem-GrID--2 > .aem-GrIDcolumn.aem-GrIDcolumn--offset--default--2 {
  margin-left: 100%;
}
...
..
.

我尝试使用 "&,&aem-GrID..." 但呈现相同的 CSS。有人可以帮我吗？

解决方法

你可以看看@extend。文档 https://sass-lang.com/documentation/at-rules/extend

输入

$pc: 1000;

%margin-styles {
     margin-left: $pc - 100;
}

@for $i from 1 through 12 {
     .aem-Grid.aem-Grid--#{$i}>.aem-Gridcolumn.aem-Gridcolumn--offset--default--#{$i} {
         @extend %margin-styles; 
     }
}

输出

.aem-Grid.aem-Grid--12 > .aem-Gridcolumn.aem-Gridcolumn--offset--default--12,.aem-Grid.aem-Grid--11 > .aem-Gridcolumn.aem-Gridcolumn--offset--default--11,.aem-Grid.aem-Grid--10 > .aem-Gridcolumn.aem-Gridcolumn--offset--default--10,.aem-Grid.aem-Grid--9 > .aem-Gridcolumn.aem-Gridcolumn--offset--default--9,.aem-Grid.aem-Grid--8 > .aem-Gridcolumn.aem-Gridcolumn--offset--default--8,.aem-Grid.aem-Grid--7 > .aem-Gridcolumn.aem-Gridcolumn--offset--default--7,.aem-Grid.aem-Grid--6 > .aem-Gridcolumn.aem-Gridcolumn--offset--default--6,.aem-Grid.aem-Grid--5 > .aem-Gridcolumn.aem-Gridcolumn--offset--default--5,.aem-Grid.aem-Grid--4 > .aem-Gridcolumn.aem-Gridcolumn--offset--default--4,.aem-Grid.aem-Grid--3 > .aem-Gridcolumn.aem-Gridcolumn--offset--default--3,.aem-Grid.aem-Grid--2 > .aem-Gridcolumn.aem-Gridcolumn--offset--default--2,.aem-Grid.aem-Grid--1 > .aem-Gridcolumn.aem-Gridcolumn--offset--default--1 {
    margin-left: 900;
}