믹스인 – 상위 스타일

by


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;
      }
    }
  }
}
'추천 관련글,