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
Sass
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
Sass
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
Sass
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
Sass
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
Sass
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
Sass
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
Sass
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
Sass
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