mirror of
https://github.com/danog/sass-site.git
synced 2024-12-02 17:38:26 +01:00
36 lines
744 B
Plaintext
36 lines
744 B
Plaintext
|
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]: ../functions/selectors#selector-unify
|
||
|
|
|
||
|
|
<% example do %>
|
||
|
|
@mixin unify-parent($child) {
|
||
|
|
@at-root #{selector-unify(&, $child)} {
|
||
|
|
@content;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.wrapper .field {
|
||
|
|
@include unify-parent("input") {
|
||
|
|
/* ... */
|
||
|
|
}
|
||
|
|
@include unify-parent("select") {
|
||
|
|
/* ... */
|
||
|
|
}
|
||
|
|
}
|
||
|
|
===
|
||
|
|
@mixin unify-parent($child)
|
||
|
|
@at-root #{selector-unify(&, $child)}
|
||
|
|
@content
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.wrapper .field
|
||
|
|
@include unify-parent("input")
|
||
|
|
/* ...
|
||
|
|
|
||
|
|
@include unify-parent("select")
|
||
|
|
/* ...
|
||
|
|
<% end %>
|