セレクタとして親セレクタ（＆）を単独で使用することは何ですか？そのようなセレクタを使うのは悪い習慣ですか？

Question

Less（LessCSS）に関するチュートリアルの後でチュートリアルを読んだ後、私はこの&演算子をどのように使うのだろうと思っていました。

div { 
    &.fullheight { 
    height: 100%; 
    } 
} 

// turns into 

div.fullheight { 
    height: 100%; 
} 

しかし、私は多くの場合、これを見た：私は、それは次のように親要素を参照することを知っているクラスの内部ONLY &演算子を使用した場合

div { 
    span { 
     & { 
      padding: 1em; 
      margin: 1em; 
     } 
    } 
} 

// turns into 

div span { 
    padding: 1em; 
    margin: 1em; 
} 

などが、それはかなりの親要素を表すが、あなたはこのように入力したときに同じ結果を持つことができますので、この悪い習慣をやっている：

div { 
    span { 
     padding: 1em; 
     margin: 1em; 
    } 
} 

仕事の両方、それは悪い/良い習慣であるか、それらのそれぞれ別の状況で使用される可能性がありますか？余分明確にするために

---

は、以下の私が最初にあなたが他に何もすることなく、唯一のクラスで&を書くことができることを見た答えへのリンクです。

LESSCSS - use calculation and return value - ScottSの最初の投稿、彼の投稿の4番目の解決策。

Answer 1

一般的に、以下のような記述は悪い習慣とみなされます。&は冗長であり、値を全く追加しないからです。これは、親セレクタdiv span全体を出力するだけです。

div { 
    span { 
    & { 
     padding: 1em; 
     margin: 1em; 
    } 
    } 
} 

だから、あなただけ&（親セレクター）を使用して、このようなセレクタを書くことは避けるべきです。

---

あなたがリンクされているために、他の例では、私はあまりで、変数のスコープと遅延ロード概念を回避する教育をハックされる用語です興味深いケースです。

親セレクタなしで同じコードが記述されているとします（下記参照）。

@unit:em; 
@basevalue:1; 
@val: 1; 
@setUnit: unit(@basevalue*@val, @unit); 

.someAwesomeClass { 
    @val: .2; 
    padding: @setUnit; 
    @val: .1; 
    margin: @setUnit; 
} 

ここで、@val変数は同じブロック内で2回宣言されています。 Lessはlazy loadingの変数のため、使用する前に宣言する必要はありません。同じ変数が同じスコープ内で2回以上宣言された場合、最後の宣言が勝ちます。

変数を2回定義する場合、変数の最後の定義が使用され、現在のスコープから上方向に検索されます。これは、定義内の最後のプロパティを使用して値を決定するCSS自体に似ています。

期待が0.2emと0.1emすべきmarginためであるとpaddingするためのものであるのに対し、そのため、コンパイルされたCSS出力はpaddingとmargin両方のため0.1emとしての価値を有するであろう。

これを解決するために、その回答者は2つの名前空間（名前なし）を導入し、スコープの問題を制限しています。それぞれのネストされたブロック内で定義された変数は、そのブロックに対してのみローカルになり、2つの別々の変数とみなされます。

@unit:em; 
@basevalue:1; 
@val: 1; 
@setUnit: unit(@basevalue*@val, @unit); 

.someAwesomeClass { 
    &{ 
    @val: .2; /* this declaration applies only within this nest */ 
    padding: @setUnit; 
    } 
    &{ 
    @val: .1; /* this declaration applies only within this nest */ 
    margin: @setUnit; 
    } 
} 

（最初の行に）その答えの著者によって示されるように少ないと真の関数を作成する方法がなかったので、それは問題を回避しました。

Less v2より、Lessで独自のカスタム関数を定義し、this answer by Bass Jobsenのように使用することができます。このようなカスタム関数を書く能力は、そのようなハックを書く必要をなくすはずです。

同じスレッドでthe comment by seven-phases-maxを参照して、そのようなハッキングを必要とせずにソリューションを参照することもできます。セレクタが悪い習慣であるよう

---

Bottomlineは単独&のその使用です。リンクされた答えの解は、以前のバージョンのLessで便利だったハックでした。それでも有用ですが、代替オプションがあるので、セレクタとして単独で&を使用することは、他のオプションが動作しない非常にまれな状況でのみ使用してください。