Question

我有以下SASS @each：

$obj-list: 1, 2, 3

.object
   @each $obj in $obj-list
      &:nth-child(#{$obj})
         color: #fff

但是ir会产生以下结果：

.object:nth-child(1){
    color: #fff
}
.object:nth-child(2){
    color: #fff
}
.object:nth-child(3){
    color: #fff
}

如何让它生成更干净的CSS？

.object:nth-child(1), .object:nth-child(2), .object:nth-child(3){
    color: #fff
}

请在此处查看：http://codepen.io/anon/pen/lgbok

Answer 1

一种可能的解决方案是extend一个silent class。

$obj-list: 1, 2, 3

%object
  color: #f00

.object
  @each $obj in $obj-list
    &:nth-child(#{$obj})
      @extend %object

Here's a fork of your pen

Answer 2

解决方案是使用以下内容：

$selectors: ()
$obj-list: 1, 2, 3 

@each $obj in $obj-list
  $selectors: $selectors, unquote(".object:nth-child(#{$obj})")

#{$selectors}
  color: #f00

在原始codepen的这个分支中查看它的实际操作：http://codepen.io/anon/pen/iDJfx

这是基于此博客文章建议的技术：http://roytomeij.com/blog/2012/using-each-in-sass-to-create-selectors.html。博客文章的作者是正确的，因为这种方法并不完全优雅，但确实可以很好地完成工作。

SASS @each功能提供更干净的CSS？

2 个答案: