Question

有什么方法可以在其中一个孩子的巢中引用该元素吗？

我有以下内容：

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) {

Answer 1

回答原始问题

我相信你所寻求的是LESS中的&组合者：

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

有关您所引用的特定用途的更详细讨论，see my answer to this stack overflow question，我将其标记为“结束目标分组”。

更新媒体查询添加

LESS的媒体查询是不稳定的。他们不喜欢和常规选择者混在一起。 This answer addressed some of those issues，以及如何组合代码。但是，在你的情况下，最好是mixin，因为你需要将它们分开，你不能真正使用html.no-canvas调用作为mixin。所以像这样：

<强> LESS

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

在LESS嵌套中引用父级的父级

1 个答案:

回答原始问题

更新媒体查询添加