109

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;
   }
}

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

4

5 に答える 5

167

Kumar が指摘するように、これは Sass 以来可能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;
}
于 2014-09-03T23:27:06.800 に答える
9

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

.item {
    .helper & {

    }
}

// compiles to:
.helper .item {

}

アンパサンドを使用する別の方法は、おそらく (誤って) 探しているものです。

.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 を確認する必要があります。一重引用符と二重引用符を混ぜて、href 属性を p タグに付けています。)

于 2013-06-24T05:45:17.367 に答える
3

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

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

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

于 2013-11-18T10:06:12.310 に答える