文章/答案/技术大牛

发布

社区首页 >问答首页 >使用@for分隔SCSS中用逗号分隔的不同类

问使用@for分隔SCSS中用逗号分隔的不同类
EN

Stack Overflow用户

提问于 2021-04-28 21:14:56

回答 1查看 181关注 0票数 1

我想使用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 $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-网格.“但是呈现相同的css。有人能帮我一把吗？

css

sass

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-04-28 21:40:15

你可以看看@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;
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67307981

复制

相似问题

问使用@for分隔SCSS中用逗号分隔的不同类
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用@for分隔SCSS中用逗号分隔的不同类EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用@for分隔SCSS中用逗号分隔的不同类
EN