SCSS Parent Selector

tag `css`, `scss`, `parent-selector`, `@at-root`

前端工程師對以下需求一定很熟悉：

當添加 bold class 給 parent 時，該如何添加 styles 給 Hello World

<!-- normal -->
<div class="parent">
  <div class="child"><span>Hello World<span></div>
</div>

<!-- bold -->
<div class="parent bold">
  <div class="child"><span>Hello World<span></div>
</div>

作法

添加獨立的 css

.parent .child span {
  font-size: 16px;
}

/* 分開寫 */
.parent.bold .child span {
  font-weight: bold;
}

這個做法雖然可以，但長遠來看，我們必須將相同對象的 style 分開寫，並不利於長期維護

使用 scss 封裝

.parent {
  .child span {
    font-size: 16px;
  }
  /* 雖然較好，但還是分開寫 */
  &.bold .child span {
    font-weight: bold;
  }
}

此方法雖然看起來封裝了，也比前一個利於維護，但對於目標 span 而言還是分開寫的

使用 scss @at-root 規則

scss 的 @at-root 規則會將當前指標指向 root 環境，詳細使用方式可見scss @at-root，如以下範例：

.parent {
  .child {
    // 1. 後方不接 selector，開放 root
    @at-root {
      span {
        font-size: 16px;
      }
    }
    // 2. 後方接 selector
    @at-root span {
      font-size: 16px;
    }
  }
}

// compile to
span {
  font-size: 16px;
}

但這種方式如果要做上面的需求，我們必須 hardcore，雖然做到了想要的效果（放在一起），但每次都必須手動把整個 path 寫一遍是一件危險的事情。

.parent {
  .child {
    span {
      font-size: 16px;
      // 一起寫，但使用不方便
      @at-root .parent.bold .child span {
        font-weight: bold;
      }
    }
  }
}

mixin 解法

我們使用 scss 的 Parent Selector 來幫助我們上面 hardcore 的部分

@mixin attach-root($new-class) {
  $current-selector: &; // array
  $new-selector: []; // new array

  @each $item in $current-selector {
    $first-node: nth($item, 1);
    $appended-node: $first-node + $new-class;
    $new-item: set-nth($item, 1, $appended-node); // replace target node
    $new-selector: append($new-item, $new-selector);
  }

  @at-root #{$new-selector} {
    @content;
  }
}

上面主要是將 parent selector &儲存為變數，並替換第一個 node selector，加上指定 class 後再重新組回去，最後再用 @at-root 重新放回原位置。

使用如下：

.parent {
  .child {
    span {
      font-size: 16px;
      // 一起寫，好用
      @include attach-root('.bold') {
        font-weight: bold;
      }
    }
  }
}

// compile to
.parent .child span {
  font-size: 16px;
}
.parent.bold .child span {
  font-weight: bold;
}

Conclusion

本篇主要講到兩個 scss 蠻特別的規則 @at-root, parent-selector，這兩個東西雖然看似不知道可以幹嘛，但實際上非常有用～，上面的 mixin 只要稍作修改就能夠變成更萬能的工具摟～（這部分留給讀者自行嘗試拉～）

以上感謝大家觀看，下次見