文章/答案/技术大牛

发布

社区首页 >问答首页 >SCSS:如何将相同风格的规则连在一起？

问SCSS:如何将相同风格的规则连在一起？
EN

Stack Overflow用户

提问于 2016-09-21 11:34:40

回答 2查看 775关注 0票数 3

这个SCSS代码

@for $i from 1 through 2 {
  .style-#{$i} { 
  position: relative;
  }
}

生成这样的CSS输出：

.style-1 {
  position: relative;
}    

.style-2 {
  position: relative;
}

我希望是这样：

.style-1, .style-2 {
  position: relative;
}

如何在SCSS中使用循环实现？

sass

回答 2

Stack Overflow用户

发布于 2016-09-21 12:47:53

您可以使用占位符选择器对规则进行分组。

Sass支持一种特殊类型的选择器，称为“占位符选择器”。这些看起来像类和id选择器，除了# or。被%替换为。它们应该与@extend指令一起使用。单独使用@extend，使用占位符选择器的规则集将不会呈现给CSS。

Sassmeister 演示.

Scss：

%common {
  position: relative;
}

@for $i from 1 through 2 {
  .style-#{$i} { 
    @extend %common;
  }
}

Css产出：

.style-1, .style-2 {
  position: relative;
}

票数 2

Stack Overflow用户

发布于 2016-09-21 12:48:36

稍微不同的方法，但您可以通过一个SASS列表来实现这一点：

/* SASS Input */    
$numbers: "1","2","3","4","5";
$selector: ();

@each $num in $numbers {
    $selector: append($selector, unquote('.style-#{$num}'), 'comma');
}

#{$selector} {
  position:relative;
}

/* CSS Output */
.style-1, .style-2, .style-3, .style-4, .style-5 {
    position: relative;
}

票数 1

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

原文链接：

https://stackoverflow.com/questions/39615456

复制

相似问题

问SCSS:如何将相同风格的规则连在一起？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SCSS:如何将相同风格的规则连在一起？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SCSS:如何将相同风格的规则连在一起？
EN