嵌套 SCSS 偽選擇器

Question

我有這種偽元素結構：

&::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 1px;
  background: ${(props) => props.theme.colors.link};
  right: 6px;
}
&:first-child:before {
   content: '';
   position: absolute;
   height: 50%;
   width: 1px;
   background: ${(props) => props.theme.colors.link};
   right: 6px;
   bottom: 0;
 }
&:last-child:before {
  content: '';
  position: absolute;
  height: 50%;
  width: 1px;
  background: ${(props) => props.theme.colors.link};
  right: 6px;
  top: 0;
}

如您所見，在first-child和last-child中，我只覆蓋了 2 個屬性，因此，它似乎使其嵌套在&::before中，但我不能。 另外，在互聯網上，如果可能的話，我還沒有找到。

一切正常，我只想知道，是否有可能讓這段代碼看起來更漂亮。

Answer 1

您可以用逗號分隔它們，並且不要重復兩次。

像這樣：

&:last-child:before , &:first-child:before {
 content: '';
 position: absolute;
 height: 50%;
 width: 1px;
 background: ${(props) => props.theme.colors.link};
 right: 6px;
 top: 0;
}

Answer 2

嘗試這個

div {
  &::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 1px;
    background: ${(props) => props.theme.colors.link};
    right: 6px;
  }
  &:first-child:before {
      height: 50%;
      bottom: 0;
  }
  &:last-child:before {
      height: 50%;
      top: 0;
  }
}