実は以外と知らない？sass記法における「&」の正しい意味と一歩先の使い方

sass記法における「＆」 みなさん、sassつかってますか！？いいですよねsass！コレになれちゃうともう普通にCSSなんて書けないです！ ところで、sass記法における「＆」これ皆さん使う機会多いと思うのですが、この「＆」正しく使えてますか？ 実は私はつい最近までちゃんとした文法を知りませんでした…ｗ   クラスの連結に使う 基本的には以下の様な場合に使う事が多いと思います コンパイルした結果は以下のようになります。 この様に、クラスとクラスの連結に&を使う事が一番多いかと思います！   横並びの要素の定義に使う では、以下の様な記述をした場合、コンパイル結果はどのようになるでしょうか？ 結果は以下のようになります。 要素が+で連結された場合、CSSでは「隣接セレクタ」または「隣接兄弟セレクタ」を指し、 前に記述された要素の直後に、後ろの要素が並んだ場合にマッチします。 参考 まぁコンパイル後のCSSの解釈はよいとして、なぜ &+&という記法が隣接セレクタとなるのでしょうか？   「＆」記号は&は親参照セレクタである 公式リファレンス 私わ英語が苦手なので以下を参考にさせて頂きました。 http://www.tam-tam.co.jp/tipsnote/html_css/post5189.html このサイトによると、「＆」セレクタは以下のように説明されています。 &は親参照セレクタです。 「親参照セレクタ」 つまり こいつが親セレクタ、こいつを参照するセレクタ指定が「＆」という訳なんですね！ なので 「&+&」は「.p-panel+.p-panel」というコンパイル結果になります！   親参照セレクタ(&)は後置でも書ける &セレクタが親参照セレクタという事は、このような書き方もできます。 ３行目ですね。 &より先に違うクラス名が記述してあります。 こちらのコンパイル結果は以下のようになります。 親参照セレクタの前に違うクラスを記述することで、親クラスのさらに親に当たるクラスの定義も可能となる。 上記の記述を活用する事で、さらに親のセレクタを記述して無駄な記述を増やすくこと無く １つの親セレクタのネスト内に関係するスタイル定義をまとめることができ、コードの見通しも良くなる。   なるほどー。 奥深きsass   参考