scss 혼합
@mixin most-outer-selector($new-class) {
$current-selector: &;
$new-selector: ();
@each $item in $current-selector {
$first-item: nth($item, 1);
$appended-item: $first-item + $new-class;
$new-item: set-nth($item, 1, $appended-item);
$new-selector: append($new-item, $new-selector);
}
@at-root #{$new-selector} {
@content;
}
}
예
HTML
<div class="wrap">
<!
-- example 1 -->
<div class="parent">
<div class="child"><span>Hello World<span></div>
</div>
<!
-- example 2 -->
<div class="parent bold">
<div class="child"><span>Hello World<span></div>
</div>
</div>
scss
.parent {
.child {
span {
@include most-outer-selector('.bold') {
font-weight: bold;
color: red;
}
}
}
}