1

私はこのhtmlマークアップを持っています:

<figure class="about half">
    <figcaption class="head_section">
        <h3>About</h3>
    </figcaption>
</figure>

そして、このLESSセットアップ：

 figure {
    //some style

    &.half {
      width: 48%;
    }

    figcaption {

      h3 {

        .about & & {
          // what i need to do but isn't working
        }
      }
    }

    &.about {

      h3 {
        // some style i have which is working
      }
    }
  }

figure.aboutだから、私の質問は、スタイルから外れないように、前の2つのクラスを参照する方法h3です。それが明確であることを願っています...大いにthx。

4

1 に答える 1

4

目的の css 出力を提供していないため、ここで何を達成しようとしているのかまだわかりません。あなたの質問から私がなんとか抽出したアイデアは、次のようなCSSになります。

figure {
  /* some style */
}
figure.half {
  width: 48%;
}
figure.about figcaption h3 {
  /* what i need to do but isn't working */
}

これは正しいです？

これを機能させる方法は次の&とおりです。

figure {
    /* some style */
    &.half {
        width: 48%;
    }
}
figcaption {
    h3 {
        .about & {
            /* what i need to do but isn't working */
        }
    }
}

ここで重要なのは、&が上記のすべてのネスト レベルの「パス」を返すため、使用したいものだけでネスト ルールを作成する必要があることです (この場合figcaption、figureルールから を移動しました)。したがって、これにより、必要なセレクターの外観が得られるはずです。ただし、ネストされたルールの構造は、継承とスコープ参照を使用する方法に依存することが多く、場合によっては@variable、構造セレクターを希望どおりに正確に構築することが難しくなります。セレクターに html 構造全体を含める必要があります。また、図のコンテナーに要素を追加しない可能性が高いため、あなたの場合figure.about h3と同じように と同様に機能します。figure.about figcaption h3h3

于 2013-04-17T14:59:21.747 に答える