SCSSはネストされた子をターゲティングするために "＆"必要ですか？

ネストされた要素の前に使用しているときに、&記号が何を処理するかを調べようとしています。私は親をターゲットにした後でそれを使用しますが、それが不要になる前に使用します。SCSSはネストされた子をターゲティングするために "＆"必要ですか？

この...

ul { 
    list - style: none; 
    text - align: left; 
    & li { 
    margin - bottom: 17 px; 
    } 
}

は、私はあなたのケースで、それは同じであるべきだと思う

ul { 
    list - style: none; 
    text - align: left; 
    li { 
    margin - bottom: 17 px; 
    } 
}

2016-06-17 Kirk Ross

に同じ効果を持つことになりますいいえ、あなたは、常に持っていません。それは文脈によって異なります。 &シンボルは、現在の要素の範囲を指し、そして一般:hover、focus等のような擬似セレクタを追加するために使用される：:がもたらされる前&を省略に対し

a { 
    text-decoration: none; 
} 
a:hover { 
    font-weight: bold; 
}

：

a { 
    text-decoration: none; 

    &:hover { 
    font-weight: bold; 
    } 
}

はにコンパイル間違ったセレクタで：

a { 
    text-decoration: none; 

    :hover { 
    font-weight: bold; 
    } 
}

コンパイル先：

a { 
    text-decoration: none; 
} 

a :hover { 
    font-weight: bold; 
}

これは意図した通りに動作しません。設定なしでhttp://www.sassmeister.com/でさまざまなパターンを試すことができます。

2016-06-17 18:39:19 Kashyap

...これと同じにコンパイルするようです。 &は、通常、BEMなどのクラス命名方法を使用するときに、複雑なクラス名を作成するために使用されます。クラス「ul_styled」を取得するたとえば、あなたは、SASSで&演算子ははあなたがそれを行うことを仮定何をするものではありません

ul { 
 
    somestyle... 
 
    &_styled { 
 
    somestyle... 
 
    } 
 
}

2016-06-17 18:25:19

使用することができます - それはちょうどあなたの便宜のためでありますただ爆発するだけではありません。あなたはこのようなLOC減らすために複数の属性（クラス、IDなど）を組み合わせて使用することができます

：コンパイル時に

.a { 
    color: white; 
    &.b { 
     font-size: 1.5rem; 
    } 
}

はこのようになります。

.a { 
    color: white; 
} 
.a.b { 
    font-size: 1.5rem; 
}

は、この記事の続きを読みます： https://css-tricks.com/the-sass-ampersand/

2016-06-17 18:34:14

実際には&記号は、CSSの1レベル上位の要素のプレースホルダです。したがって、私はあなたの2つの例が正確ではないはずですまったく同じ。しかし、アドレスul内のすべてのli要素（また、一つまたは二つのレベルダウン）の両方から、両者が任意のサブメニューliの

2016-06-17 18:34:32 Johannes

答えて