Question

当我们有两个父母时，如何选择第二个父母？
SCSS:

html {
    .ltr {
        direction: ltr;

        @at-root span#{&} {
            display: inline-block;
        }
    }
}

所需的输出：

html .ltr {
  direction: ltr;
}

html span.ltr {
    display: inline-block;
}

输出：

html .ltr {
  direction: ltr;
}

spanhtml .ltr {
    display: inline-block;
}

是将两个命令分开的唯一解决方案吗？

Answer 1

将 span 从 .ltr 中移出，然后在 &.ltr 中使用 span。

html {
    .ltr {
        direction: ltr;
    }

    span {
        /* You can add here more properties for span  that does not have .ltr */
        &.ltr {
          display: inline-block;
      }
    }
}

这也会产生相同的结果。但是，您不能在 span 上使用更多没有 .ltr 的属性。

html {
  .ltr {
    direction: ltr;
  }

  span.ltr {
      display: inline-block;
  }
}

SCSS / SASS 有两个父级时如何选择第二个父级

1 个答案: