アンパサンド（＆）とタイプセレクターを使用して親を結合するSass

Sassでのネストに問題があります。次のHTMLがあるとします。

<p href="#" class="item">Text</p>
<p href="#" class="item">Text</p>
<a href="#" class="item">Link</a>

スタイルを次のようにネストしようとすると、コンパイルエラーが発生します。

.item {
    color: black;
    a& {
        color:blue;
   }
}

同じ要素の一部である場合、親セレクターの前にタイプセレクターを参照するにはどうすればよいですか？

クマーが指摘するように、これはサス以来可能3.3.0.rc.1 (Maptastic Maple)でした。

@ at-rootディレクティブにより、1つ以上のルールが親セレクターの下にネストされるのではなく、ドキュメントのルートで発行されます。

@at-rootディレクティブと補間#{}を組み合わせて、意図した結果を得ることができます。

SASS

.item {
    color: black;
    @at-root {
        a#{&} {
            color:blue;
        }
    }
}

// Can also be written like this.
.item {
    color: black;
    @at-root a#{&} {
        color:blue;
    }
}

出力CSS

.item {
    color: black;
}
a.item {
    color: blue;
}

@at-rootあなたがチェーンアップし、最も近いセレクタを延長する場合のみの方法は、問題を解決することはできません。例として：

#id > .element {
    @at-root div#{&} {
        color: blue;
    }
}

コンパイルされます：

div#id > .element {
    color: blue;
}

.element代わりにタグを結合する必要がある場合はどうなります#idか？

これselector-unify()を解決するSassという関数があります。これを使う@at-rootとターゲットを絞ることができ.elementます。

#id > .element {
    @at-root #{selector-unify(&, div)} {
        color: blue;
    }
}

コンパイルされます：

#id > div.element {
    color: blue;
}

まず、この回答を書いている時点では、selector＆を使用するsass構文はありません。そのようなことを行う場合は、セレクターとアンパサンドの間にスペースが必要になります。例えば：

.item {
    .helper & {

    }
}

// compiles to:
.helper .item {

}

アンパサンドを使用するもう1つの方法は、おそらく（誤って）探しているものです。

.item {
    &.helper {

    }
}

// compiles to:
.item.helper {

}

これにより、他のクラス、ID、疑似セレクターなどでセレクターを拡張できます。残念ながら、これは理論的には.itemaのようにコンパイルされ、明らかに機能しません。

CSSの書き方を考え直したいだけかもしれません。使用できる親要素はありますか？

<div class="item">
    <p>text</p>
    <p>text</p>
    <a href="#">a link</a>
</div>

このようにして、次の方法でSASSを簡単に作成できます。

.item {
    p {
        // paragraph styles here
    }
    a {
        // anchor styles here
    }
}

（補足：HTMLを確認してください。一重引用符と二重引用符を混在させ、pタグにhref属性を配置しています。）

AFAIKクラスとタグのアンパサンドを同時に組み合わせる場合は、次の構文を使用する必要があります。

.c1 {
  @at-root h1#{&},
    h2#{&}
    &.c2, {
    color: #aaa;
  }
}

コンパイルされます

h1.c1,
h2.c1,
.c1.c2 {
  color: #aaa;
}

その他の使用法（前にクラスを使用する、@at-root複数@at-rootのを使用するなど）はエラーになります。

お役に立てれば幸いです

この機能はSassの最新バージョンに搭載されています。 3.3.0.rc.1(Maptastic Maple)

使用する必要がある密接に関連する2つの機能は、&ネスト可能なスタイル内で補間して親要素を参照できるscriptable と@at-root、直後に続くセレクターまたはCSSのブロックをルートに配置するディレクティブです（出力されたCSSに親があります）

詳細については、このGithubの問題を参照してください