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

我尝试了许多不同的组合，包括和没有＆amp;但一直无法获得我想要的输出。这是我目前得到的：

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

Css Less - 需要访问嵌套元素

1 个答案: