sass:selector

Совместимость:
Dart Sass
since 1.23.0
LibSass
Ruby Sass

В настоящее время только Dart Sass поддерживает загрузку встроенных модулей с помощью @use. Пользователи других реализаций должны вместо этого вызывать функции, используя их глобальные имена.

Значения селектора permalinkЗначения селектора

Функции в этом модуле проверяют и управляют селекторами. Всякий раз, когда они возвращают селектор, это всегда разделенный запятыми список (список селектора), содержащий списки, разделенные пробелами (сложные селекторы), которые содержат строки без кавычек (составные селекторы). Например, селектор .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.

Селекторы $super и $sub могут содержать селекторы-заполнители, но не родительские селекторы.

SCSS Syntax

@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 Syntax

@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 Syntax

@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 Syntax

@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 

Расширяет $selector так же, как правило @extend.

Возвращает копию $selector, измененную следующим правилом @extend:

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

Другими словами, заменяет все экземпляры $extendee в $selector на $extendee, $extender. Если $selector не содержит $extendee, возвращает его как есть.

Селекторы $selector, $extendee и $extender могут содержать селекторы-заполнители, но не родительские селекторы.

Смотрите также selector.replace().

SCSS Syntax

@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 Syntax

@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 Syntax

@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 Syntax

@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 Syntax

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

Sass Syntax

@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 

Возвращает копию $selector, в которой все экземпляры $original заменены на $replacement.

При этом используется правило @extend интеллектуального объединения, чтобы убедиться, что $replacement легко интегрируется в $selector. Если $selector не содержит $original, возвращает его как есть.

Селекторы $selector, $original и $replacement могут содержать селекторы местозаполнителей, но не родительские селекторы.

Смотрите также selector.extend().

SCSS Syntax

@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 Syntax

@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.

Возвращает null, если $selector1 и $selector2 не совпадают ни с одним из одних и тех же элементов или если нет селектора, который мог бы выразить их перекрытие.

Подобно селекторам, сгенерированным правилом @extend, возвращаемый селектор не гарантирует совпадения всех элементов, соответствующих как $selector1, так и $selector2, если они оба являются сложными селекторами.

SCSS Syntax

@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 Syntax

@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 Syntax

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

Sass Syntax

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