将父类包含在子规则中的Sass运算符

Question

当前代码：

.parent-1 {
    .child {
        @include set-position-offset(10px, 20px);
    }
}
.parent-2 {
    .child {
        @include set-position-offset(20px, 30px);
    }
}
.parent-3 {
    .child {
        @include set-position-offset(30px, 40px);
    }
}

有办法简化上面的代码吗？

类似于下面的风格：

.child {
    {some operator}.parent-1 {
        @include set-position-offset(10px, 20px);
    }
    {some operator}.parent-2 {
        @include set-position-offset(20px, 30px);
    }
    {some operator}.parent-3 {
        @include set-position-offset(30px, 40px);
    }
}

Answer 1

尾随符号-- selector & { ... } --应该能做到这一点：

.child {
    .parent-1 & {
        @include set-position-offset(10px, 20px);
    }
    .parent-2 & {
        @include set-position-offset(20px, 30px);
    }
    .parent-3 & {
        @include set-position-offset(30px, 40px);
    }
}

http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand

Answer 2

可以使用循环，如下所示：

@for $i from 1 through 3 {
  .parent-#{$i} {
    .child {
      @include set-position-offset(10px * $i, (10px * $i) + 10);
    }
  }
}