1

有什么方法可以引用其中一个子元素的嵌套中的元素吗？

我有以下内容：

div.chem_stage {
    position: relative;

    html.no-canvas {
        display: none;
    }
}

当然这不起作用，有没有使用LESS的方法让我这样做？我可以做

html.no-canvas {
    .chem_stage {

    }
    .another_element {

    }
    etc...
}

但我有很多元素需要应用这条规则，我宁愿保留我的规则

编辑：

使用 ScottS 的 techqniue，它似乎没有与 @media 查询混合

div.chem_stage {
    html.no-canvas &, @media only screen and (max-width : @respChem) {

生产

html.no-canvas div.chem_stage,
div.chem_stage $media only screen and (max-width : @respChem) {
4

1 回答 1

2

回答原始问题

我相信您正在寻找的是&LESS 中的组合子：

较少的

div.chem_stage {
    position: relative;

    html.no-canvas & {
        display: none;
    }
}

CSS 输出

div.chem_stage {
  position: relative;
}
html.no-canvas div.chem_stage {
  display: none;
}

有关您所指的特定用途的更详细讨论，请参阅我对此堆栈溢出问题的回答，我将其标记为“结束目标分组”。

媒体查询添加更新

LESS 中的媒体查询是喜怒无常的。他们不喜欢与常规选择器混在一起。这个答案解决了其中一些问题，以及如何组合代码。但是，在您的情况下，可能最好使用 mixin，因为您需要将它们分开，并且您不能真正将html.no-canvas调用用作 mixin。所以是这样的：

较少的

div.chem_stage {
    position: relative;

    .groupedCode() {
        display: none;
    }

    html.no-canvas & {
        .groupedCode()
    }

    @media only screen and (max-width : @respChem) { 
        .groupedCode()
    }
}

CSS 输出（假设@respChem在300px这里）

div.chem_stage {
  position: relative;
}
html.no-canvas div.chem_stage {
  display: none;
}
@media only screen and (max-width: 300px) {
  div.chem_stage {
    display: none;
  }
}
于 2012-12-27T11:25:26.427 回答