sass-site/source/code-snippets/example-advanced-nesting.liquid

{% markdown %}
For example, suppose you want to write a selector that matches the outer
selector *and* an element selector. You could write a mixin like this one that uses the [`selector.unify()` function][] to combine `&` with a user's selector.

[`selector.unify()` function]: ../../modules/selector#unify
{% endmarkdown %}

{% codeExample 'advanced-nesting' %}
@use "sass:selector";

@mixin unify-parent($child) {
  @at-root #{selector.unify(&, $child)} {
    @content;
  }
}

.wrapper .field {
  @include unify-parent("input") {
    /* ... */
  }
  @include unify-parent("select") {
    /* ... */
  }
}
===
@use "sass:selector"

@mixin unify-parent($child)
  @at-root #{selector.unify(&, $child)}
    @content


.wrapper .field
  @include unify-parent("input")
    /* ... */

  @include unify-parent("select")
    /* ... */
===
.wrapper input.field {
  /* ... */
}

.wrapper select.field {
  /* ... */
}
{% endcodeExample %}