Nesting SCSS pseudo selectors-CodePudding

I have this structure of pseudo elements:

&::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;
}

As you can see, in first-child and last-child I only overwrite 2 properties, so, it seems to make it nested in &::before, but I can't. Also, on Internet, I haven't found, if it's possible.

Everything works just find, I just want to know, if there is possibility to make this code look prettier.

CodePudding user response：

Try this

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;
  }
}

CodePudding user response：

I think you can use mixin and include for common styles.

like this :

 @mixin common-styles($top,$bottom){
  content: '';
 position: absolute;
 height: 50%;
 width: 1px;
 background: ${(props) => props.theme.colors.link};
 right: 6px;
 top: $top;
 bottom:$bottom
}

&:last-child:before {
  @include common-styles(0 , unset);
}

&:first-child:before {
  @include common-styles(unset , 0);
 }