Question

此SASS代码......

@mixin test
{
  @at-root #{selector-replace(&, '.class1', '.class1:nth-child(odd)')}
  {
    color:red;
  }
}

.class1
{
  .class2
  {
     @include test;
  }
}

...汇编为：

.class1:nth-child(odd) .class2
{
  color: red;
}

不使用selector-replace时是否可行（因为我不知道如何调用class1）？

我只想为祖父母添加一个第n个子选择器。

我只允许更改mixin，而不是原始代码。

Answer 1

好的，这可以解决问题：

@mixin test
{

  // Find the first selector
  $parent : nth(nth(&, 1), 1);

  // Defines a list for the rest of the selectors
  $rest : ();

  // For each selector of &, starting from the second
  @for $i from 2 through length(nth(&, 1)) {

    // Adds the selector to the list of the "rest of the selectors"
    $rest: append($rest, nth(nth(&, 1), $i));

  }

  // Adds the selector at root
  @at-root #{$parent}:nth-child(odd) #{$rest} {
    color: red;
  }

}

.class1
{
  .class2
  {
    @include test;
  }
}

这编译为：

.class1:nth-child(odd) .class2 {
  color: red;
}

希望它有所帮助！

SASS：将伪类添加到祖父母的＆符号中

1 个答案: