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);
    }
  }
}

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

2 个答案: