即時子セレクタがLESS

Question

LESSに出力に直接子セレクタ（>）を適用させる方法はありますか？

.panel { 
    ... 
    > .control { 
     ... 
    } 
} 

やLESSのようなものを生成している：

実際

.panel > .control { ... } 

Answer 1

UPDATE

、内のコードを私のstyle.lessで

、私のような何かを書きたいです元の質問はうまく動作します。子セレクタ>を使うことができます。

---

答えを見つけました。

.panel { 
    ... 
    >.control { 
     ... 
    } 
} 

">"と "。"の間にスペースがないことに注意してください。それ以外の場合は機能しません。

Answer 2

公式の方法：

.panel { 
    & > .control { 
    ... 
    } 
} 

&は、常に現在のセレクタを指します。これは、クラスの宣言時にを減らすことができます

tr { 
    & > td:first-child {font-weight:bold;} 
} 

：あなたは、このような<tr>の最初の<td>として、最初の子要素をターゲットにしている場合

は、あなたがこのようなものを使用することができ、また、http://lesscss.org/features/#features-overview-feature-nested-rules

Answer 3

を参照してください。彼らは必要ではありません。

Answer 4

「&」を使用している間は、正しい構文が後になり、ここでは冗長になります。

.panel{ 
    > .control{ 
    } 
} 

less guidelinesによると、「&」が先祖をパラメータ化するために使用されている（ただし、ここではそのような必要はありません）。 this less exampleの場合、&：ホバーは、より重要です。ホバーの場合、構文エラーが発生します。しかし、ここで '&'を使用するための構文上の要件はありません。それ以外の場合は、本質的に親を参照するので、すべてのネストには「&」が必要です。