Css-Less-需要访问嵌套元素

Question

我正在为一个项目设置一些新的排版。我正在使用Less，所以决定使用该功能来设置一些样式——这里有一个例子：

.serif
{
    font-family: 'Roboto', sans-serif;
    font-style:normal;
    font-weight:400;
    &.body1
    {
        font-size:1.4rem;
        .mq-min(@desktop-bp;
        {
            font-size:1.3rem;
        });
    }
}

我希望能够实现的是在继承外部父样式的同时调用任何内部组合，如下所示：

body
{
    .serif.body1;
}

我尝试过很多不同的组合，有和没有&但一直无法获得我想要的所需输出。以下是我目前得到的：

body {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.4rem;
}
body.body1 {
  font-size: 1.4rem;
}
@media only screen and (min-width: 960px) {
  body.body1 {
    font-size: 1.3rem;
  }
}

最终，这是我必须手动输入的，才能使身体样式按要求工作：

body {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.4rem;
}
@media only screen and (min-width: 960px) {
  body {
    font-size: 1.3rem;
  }
}

Answer 1

因此，基于上述注释中的一些澄清（例如，body1类不必出现在生成的CSS中，仅用作mixin），以下修改实现了目的：

.serif {
    font-family: 'Roboto', sans-serif;
    font-style:   normal;
    font-weight:  400;
    .body() {
        .serif;
        font-size: 1.4rem;
        @media only screen and (min-width: 960px) {
            font-size: 1.3rem;
        }
    }
}
body {
    .serif.body;
}