Sass 使用占位符仅获取imediate父级，而不是所有路径

我有以下几点意见：

%slider {
  .c-slider {
    $parent: &;
    &--thumb {
     #{$parent}__item{
       margin:0;
     }
    }
  }
}
.l-cap {
  @extend %slider;
}

我得到：

 .l-cap .c-slider--thumb .l-cap .c-slider__item {margin: 0; }

但我想得到：

.l-cap .c-slider--thumb .c-slider__item {margin: 0; }

---

我需要第二个孩子的直接父母。我尝试了@at root，但没有成功。

这是实现它的唯一方法

%slider {
  .c-slider {
    &--thumb {
     .c-slider__item{
        margin:0;
      }
    }
  }
}

.l-cap {
  @extend %slider;
}

结果将是

.l-cap .c-slider--thumb .c-slider__item {
  margin: 0;
}

.l-cap .c-slider--thumb .c-slider__item {
  margin: 0;
}

对于更复杂的嵌套，可以使用@at root

.grand-parent {
  .parent {
    @at-root .myDiv {
      color: blue; 
    }
  }
}

结果将是

.myDiv {
  color: blue;
}

---

这是实现它的唯一途径

%slider {
  .c-slider {
    &--thumb {
     .c-slider__item{
        margin:0;
      }
    }
  }
}

.l-cap {
  @extend %slider;
}

结果将是

.l-cap .c-slider--thumb .c-slider__item {
  margin: 0;
}

.l-cap .c-slider--thumb .c-slider__item {
  margin: 0;
}

对于更复杂的嵌套，可以使用@at root

.grand-parent {
  .parent {
    @at-root .myDiv {
      color: blue; 
    }
  }
}

结果将是

.myDiv {
  color: blue;
}

---

您也可以使用这种方法

&

是引用当前选择器的所有父元素的列表的sass列表，因此您可以使用

&

上的所有列表函数，轻松获取您选择的

&

的第n个子元素（在本例中为第二个子元素）：

将输出：

---

您也可以使用这种方法

&

是引用当前选择器的所有父元素的列表的sass列表，因此您可以使用

&

上的所有列表函数，轻松获取您选择的

&

的第n个子元素（在本例中为第二个子元素）：

将输出：