1

その子の 1 つのネスト内で要素を参照する方法はありますか?

私は次のものを持っています：

div.chem_stage {
    position: relative;

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

もちろん、これは機能しません。LESS を使用してこれを実行できるようにする方法はありますか? 私はそれをできた

html.no-canvas {
    .chem_stage {

    }
    .another_element {

    }
    etc...
}

しかし、このルールを適用する必要がある要素がたくさんあり、ルールをその場で維持したい

編集：

ScottS の手法を使用すると、@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のメディアクエリは気まぐれです。彼らは通常のセレクターと混合するのが好きではありません。この回答は、これらの問題のいくつかと、コードを組み合わせる方法に対処しました。ただし、あなたの場合、それらを別々に保つ必要があり、実際にはhtml.no-canvas呼び出しをミックスインとして使用できないため、おそらくミックスインが最適です。だからこのようなもの：

以下

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 に答える