Question

我不太确定这是否是一个问题，或者是否可以完成。我甚至不确定我应该谷歌知道它是否可以完成/如何完成。

我想要做的是让一个具有与其父级相同的类选择器的子类。我在Less和CSS中做到了这一点（见下文），但我认为这不是最干净的方法。是否有更好或更清洁的方式来重复使用＆＃34;类选择器？

有问题的选择器是

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

我有以下少量代码

.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

我个人不太喜欢在样本中重复使用类名。但是，在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;
}

具有相同名称的子类

1 个答案: