sass:selector

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

Объединяет $selectors без потомственных комбинаторов — то есть без пробела между ними.

Если любой селектор в $selectors является списком селекторов, каждый сложный селектор объединяется отдельно.

Селектор $selectors может содержать плейсхолдерные селекторы, но не родительские селекторы.

См. также selector.nest().

@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

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

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

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

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

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

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

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

@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 в формате значения селектора.

@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

Возвращает копию $selector со всеми вхождениями $original, заменёнными на $replacement.

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

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

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

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

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

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

@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