sass:selector

Dart Sass: since 1.23.0 (バージョン1.23.0以降)
LibSass: ✗
Ruby Sass: ✗

現在、Dart Sassのみが@useを使用した組み込みモジュールの読み込みをサポートしています。他の実装のユーザーは、代わりにグローバル名を使用して関数を呼び出す必要があります。

セレクタ値セレクタ値パーマリンク

このモジュールの関数は、セレクタを検査および操作します。セレクタを返すときは、常にスペース区切りのリスト（複合セレクタ）を含むカンマ区切りのリスト（セレクタリスト）であり、引用符で囲まれていない文字列（複合セレクタ）が含まれます。たとえば、セレクタ.main aside:hover, .sidebar pは次のように返されます。

@debug ((unquote(".main") unquote("aside:hover")),
        (unquote(".sidebar") unquote("p")));
// .main aside:hover, .sidebar p

これらの関数のセレクタ引数は同じ形式にすることができますが、通常の文字列（引用符で囲まれた、または引用符で囲まれていない）またはその組み合わせにすることもできます。たとえば、".main aside:hover, .sidebar p"は有効なセレクタ引数です。

selector.is-superselector($super, $sub)
is-superselector($super, $sub) //=> boolean

セレクタ$superが、セレクタ$subが一致するすべての要素と一致するかどうかを返します。

$superが$subよりも*多く*の要素と一致する場合でも、trueを返します。

$superおよび$subセレクタには、プレースホルダーセレクタを含めることができますが、親セレクタは含めることができません。

  SCSS

  Sass

       プレイグラウンドSCSS 構文@use "sass:selector";

@debug selector.is-superselector("a", "a.disabled"); // true
@debug selector.is-superselector("a.disabled", "a"); // false
@debug selector.is-superselector("a", "sidebar a"); // true
@debug selector.is-superselector("sidebar a", "a"); // false
@debug selector.is-superselector("a", "a"); // true

       プレイグラウンドSass 構文@use "sass:selector"

@debug selector.is-superselector("a", "a.disabled")  // true
@debug selector.is-superselector("a.disabled", "a")  // false
@debug selector.is-superselector("a", "sidebar a")  // true
@debug selector.is-superselector("sidebar a", "a")  // false
@debug selector.is-superselector("a", "a")  // true

selector.append($selectors...)
selector-append($selectors...) //=> selector

子孫結合子なしで、つまり間に空白を入れずに$selectorsを結合します。

$selectorsのいずれかのセレクタがセレクタリストである場合、各複合セレクタは個別に結合されます。

$selectorsにはプレースホルダーセレクタを含めることができますが、親セレクタは含めることができません。

selector.nest()も参照してください。

  SCSS

  Sass

       プレイグラウンドSCSS 構文@use "sass:selector";

@debug selector.append("a", ".disabled"); // a.disabled
@debug selector.append(".accordion", "__copy"); // .accordion__copy
@debug selector.append(".accordion", "__copy, __image");
// .accordion__copy, .accordion__image

       プレイグラウンドSass 構文@use "sass:selector"

@debug selector.append("a", ".disabled")  // a.disabled
@debug selector.append(".accordion", "__copy")  // .accordion__copy
@debug selector.append(".accordion", "__copy, __image")
// .accordion__copy, .accordion__image

selector.extend($selector, $extendee, $extender)
selector-extend($selector, $extendee, $extender) //=> selector

@extend ルールと同様に、$selectorを拡張します。

次の@extendルールで変更された$selectorのコピーを返します。

#{$extender} {
  @extend #{$extendee};
}

言い換えれば、$selector内の$extendeeのすべてのインスタンスを$extendee, $extenderに置き換えます。$selectorに$extendeeが含まれていない場合は、そのまま返します。

$selector、$extendee、および$extenderセレクタには、プレースホルダーセレクタを含めることができますが、親セレクタは含めることができません。

selector.replace()も参照してください。

  SCSS

  Sass

       プレイグラウンドSCSS 構文@use "sass:selector";

@debug selector.extend("a.disabled", "a", ".link"); // a.disabled, .link.disabled
@debug selector.extend("a.disabled", "h1", "h2"); // a.disabled
@debug selector.extend(".guide .info", ".info", ".content nav.sidebar");
// .guide .info, .guide .content nav.sidebar, .content .guide nav.sidebar

       プレイグラウンドSass 構文@use "sass:selector"

@debug selector.extend("a.disabled", "a", ".link")  // a.disabled, .link.disabled
@debug selector.extend("a.disabled", "h1", "h2")  // a.disabled
@debug selector.extend(".guide .info", ".info", ".content nav.sidebar")
// .guide .info, .guide .content nav.sidebar, .content .guide nav.sidebar

selector.nest($selectors...)
selector-nest($selectors...) //=> selector

$selectorsがスタイルシート内で互いにネストされているかのように結合します。

$selectorsにはプレースホルダーセレクタを含めることができます。他のセレクタ関数とは異なり、最初のセレクタを除くすべてに親セレクタを含めることもできます。

selector.append()も参照してください。

  SCSS

  Sass

       プレイグラウンドSCSS 構文@use "sass:selector";

@debug selector.nest("ul", "li"); // ul li
@debug selector.nest(".alert, .warning", "p"); // .alert p, .warning p
@debug selector.nest(".alert", "&:hover"); // .alert:hover
@debug selector.nest(".accordion", "&__copy"); // .accordion__copy

       プレイグラウンドSass 構文@use "sass:selector"

@debug selector.nest("ul", "li")  // ul li
@debug selector.nest(".alert, .warning", "p")  // .alert p, .warning p
@debug selector.nest(".alert", "&:hover")  // .alert:hover
@debug selector.nest(".accordion", "&__copy")  // .accordion__copy

selector.parse($selector)
selector-parse($selector) //=> selector

セレクタ値形式で$selectorを返します。

  SCSS

  Sass

       プレイグラウンドSCSS 構文@use "sass:selector";

@debug selector.parse(".main aside:hover, .sidebar p");
// ((unquote(".main") unquote("aside:hover")),
//  (unquote(".sidebar") unquote("p")))

       プレイグラウンドSass 構文@use "sass:selector"

@debug selector.parse(".main aside:hover, .sidebar p")
// ((unquote(".main") unquote("aside:hover")),
//  (unquote(".sidebar") unquote("p")))

selector.replace($selector, $original, $replacement)
selector-replace($selector, $original, $replacement) //=> selector

$originalのすべてのインスタンスを$replacementに置き換えた$selectorのコピーを返します。

これは、@extend ルールのインテリジェントな統合を使用して、$replacementが$selectorにシームレスに統合されるようにします。$selectorに$originalが含まれていない場合は、そのまま返します。

$selector、$original、および$replacementセレクタには、プレースホルダーセレクタを含めることができますが、親セレクタは含めることができません。

selector.extend()も参照してください。

  SCSS

  Sass

       プレイグラウンドSCSS 構文@use "sass:selector";

@debug selector.replace("a.disabled", "a", ".link"); // .link.disabled
@debug selector.replace("a.disabled", "h1", "h2"); // a.disabled
@debug selector.replace(".guide .info", ".info", ".content nav.sidebar");
// .guide .content nav.sidebar, .content .guide nav.sidebar

       プレイグラウンドSass 構文@use "sass:selector"

@debug selector.replace("a.disabled", "a", ".link")  // .link.disabled
@debug selector.replace("a.disabled", "h1", "h2")  // a.disabled
@debug selector.replace(".guide .info", ".info", ".content nav.sidebar")
// .guide .content nav.sidebar, .content .guide nav.sidebar

selector.unify($selector1, $selector2)
selector-unify($selector1, $selector2) //=> selector | null

$selector1と$selector2の*両方*によって一致する要素とのみ一致するセレクタを返します。

$selector1と$selector2が同じ要素と一致しない場合、または重複を表すセレクタがない場合は、nullを返します。

@extend ルールによって生成されたセレクタと同様に、返されたセレクタは、両方とも複合セレクタの場合、$selector1と$selector2の両方によって一致する*すべて*の要素と一致することが保証されません。

  SCSS

  Sass

       プレイグラウンドSCSS 構文@use "sass:selector";

@debug selector.unify("a", ".disabled"); // a.disabled
@debug selector.unify("a.disabled", "a.outgoing"); // a.disabled.outgoing
@debug selector.unify("a", "h1"); // null
@debug selector.unify(".warning a", "main a"); // .warning main a, main .warning a

       プレイグラウンドSass 構文@use "sass:selector"

@debug selector.unify("a", ".disabled")  // a.disabled
@debug selector.unify("a.disabled", "a.outgoing")  // a.disabled.outgoing
@debug selector.unify("a", "h1")  // null
@debug selector.unify(".warning a", "main a")  // .warning main a, main .warning a

selector.simple-selectors($selector)
simple-selectors($selector) //=> list

$selector内の単純セレクタのリストを返します。

$selectorは、複合セレクタを含む単一の文字列である必要があります。これは、結合子（スペースを含む）またはカンマを含めることができないことを意味します。

返されるリストはカンマ区切りで、単純セレクタは引用符で囲まれていない文字列です。

  SCSS

  Sass

       プレイグラウンドSCSS 構文@use "sass:selector";

@debug selector.simple-selectors("a.disabled"); // a, .disabled
@debug selector.simple-selectors("main.blog:after"); // main, .blog, :after

       プレイグラウンドSass 構文@use "sass:selector"

@debug selector.simple-selectors("a.disabled")  // a, .disabled
@debug selector.simple-selectors("main.blog:after")  // main, .blog, :after

現在のリリース
Dart Sass 1.79.4
LibSass 3.6.6
Ruby Sass ⚰
実装ガイド

sass:selector

セレクタ値セレクタ値 パーマリンク

SCSS 構文

Sass 構文

SCSS 構文

Sass 構文

SCSS 構文

Sass 構文

SCSS 構文

Sass 構文

SCSS 構文

Sass 構文

SCSS 構文

Sass 構文

SCSS 構文

Sass 構文

SCSS 構文

Sass 構文

セレクタ値セレクタ値パーマリンク