代码之家 › 专栏 › 技术社区 › user3541631

使用占位符仅获取IMedite父级,而不是所有路径

scss-mixins sass

0

user3541631 · 技术社区 · 6 年前

我有以下SASS:

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

我需要第二个去接直系父母。我在根上试了一下,但没有运气。

2 回复 | 直到 6 年前

1

2

muecas 6 年前

您也可以使用这种方法。 & 是引用当前选择器的所有父元素的列表的sass列表,因此可以在 & 很容易得到的第n个孩子 & 您可以选择(在本例中是第二个):

%slider {
  .c-slider {

    // Get just the second selector
    $parent : nth(nth(&, 1), 2);

    // Output
    &--thumb #{$parent}__item{
      margin:0;
    }

  }
}

.l-cap {
  @extend %slider;
}

将输出:

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

2

1

Adel Elkhodary 6 年前

只有这样才能达到目的

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

.l-cap {
  @extend %slider;
}

结果将是

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

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

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

结果将是

.myDiv {
  color: blue;
}