偽元素

以下少

.addDivider::before{
  content: "";
  height: 80%;
  background: white;
  width: 1px;
  position: absolute;
  top: 10%;
  left: 0;    
}

.nav-bar{
  background: black;
  display: flex;
  flex-direction: row;
  width: 400px;
  .nav-item{
    color: white;
    width: 100px;
    list-style-type: none;
    position: relative;
    text-align: center;
    padding: 0;
    &:not(:first-child){
      &::before{
        &:extend(.addDivider::before);
      }
    }
  }
}

將編譯成以下 CSS

.addDivider::before,
.nav-bar .nav-item:not(:first-child)::before {
  content: "";
  height: 80%;
  background: white;
  width: 1px;
  position: absolute;
  top: 10%;
  left: 0;
}
.nav-bar {
  background: black;
  display: flex;
  flex-direction: row;
  width: 400px;
}
.nav-bar .nav-item {
  color: white;
  width: 100px;
  list-style-type: none;
  position: relative;
  text-align: center;
  padding: 0;
}

使用以下 HTML

<div class="nav-bar">
  <div class="nav-item">one</div>
  <div class="nav-item">two</div>
  <div class="nav-item">three</div>
  <div class="nav-item">four</div>
</div>

我們的結果是

我們已經定義了一個預設的 divider 偽類，我們將其新增到巢狀元素中！ 現在可以使用 extend 將白色邊框新增到其他元素。