Child class 同名

Question

我不太确定这是否是一个问题，或者是否可以完成。我什至不确定我应该 google 确定它是否可以 done/how 它可以完成。

我想要做的是让 child class 具有与 parent 相同的 class 选择器。我已经在 Less 和 CSS 中完成了此操作（见下文），但我认为这不是最简洁的方法。 "re-use" class 选择器是否有更好或更简洁的方法？

有问题的选择器是

.r-slide-right-10 .r-slide-right-10 { ... }

我有以下 Less 代码

.r-slide-right-10 {
    @media @default-media-small {
        .SlideUp(75);
        .r-slide-right-10 {
            .SlideUpNoOffset(75);
        }
    }
    @media @default-media-medium, @default-media-large {
        .SlideRight(10);
        .r-slide-right-10 {
            .SlideRightNoOffset(10);
        }
    }
}

生成以下 CSS

@media only screen and (max-width: 40.063em ) {
  .r-slide-right-10 {
    height: 75vh;
    bottom: -76vh;
  }
  .r-slide-right-10.r-active {
    -webkit-transform: translate(0, -75vh);
    -moz-transform: translate(0, -75vh);
    transform: translate(0, -75vh);
  }
  .r-slide-right-10 .r-slide-right-10 {
    height: 75vh;
    bottom: -75vh;
  }
  .r-slide-right-10 .r-slide-right-10.r-active {
    -webkit-transform: translate(0, -75vh);
    -moz-transform: translate(0, -75vh);
    transform: translate(0, -75vh);
  }
}
@media only screen and (min-width: 40.063em ), only screen and (min-width: 64.063em ) {
  .r-slide-right-10 {
    width: 10vw;
    right: -11vw;
  }
  .r-slide-right-10.r-active {
    -webkit-transform: translate(-10vw, 0);
    -moz-transform: translate(-10vw, 0);
    transform: translate(-10vw, 0);
  }
  .r-slide-right-10 .r-slide-right-10 {
    width: 10vw;
    right: -10;
  }
  .r-slide-right-10 .r-slide-right-10.r-active {
    -webkit-transform: translate(-10vw, 0);
    -moz-transform: translate(-10vw, 0);
    transform: translate(-10vw, 0);
  }
}

Answer 1

我个人不太愿意像在您的示例中那样重复使用 class 名称。然而，在 Less 中重新使用选择器来实现预期的输出是相当简单的。您可以像下面的简化示例一样使用 parent selector (&)。

.r-slide-right-10 {
    color: red;
    & & {
        color: blue;
    }
}

上面的 Less 代码在编译时会产生以下 CSS.

.r-slide-right-10 {
  color: red;
}
.r-slide-right-10 .r-slide-right-10 {
  color: blue;
}

Child class 同名

Child class with same name

css

html

less

media-queries