Question

此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中使用循环？

Answer 1

您可以使用placeholder selector对规则进行分组。

Sass支持一种称为“占位符”的特殊类型的选择器选择”。这些看起来像class和id选择器，除了＃或。被％替换。它们意味着与@extend指令一起使用。他们自己，没有使用@extend，使用的规则集占位符选择器不会呈现给CSS。

Sassmeister demo。

SCSS：

%common {
  position: relative;
}

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

Css输出：

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

Answer 2

略有不同的方法，但您可以使用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;
}

SCSS：如何用相同的样式连接规则？

2 个答案: