Generated by SassMeister.com.

input.scss

.pipe-separator {
  white-space: nowrap;

  &:empty {
    display: none;
  }

  &:not(:empty) ~ &::before {
    content: ' | ';
  }
  
  @at-root &.bullet {
    &:not(:empty) ~ &::before {
      content: ' • ';
    }
  }

  &:not(:empty) + &:empty::before,
  &:empty + &:empty::before {
    content: '';
  }
}

output.css

@charset "UTF-8";
.pipe-separator {
  white-space: nowrap;
}
.pipe-separator:empty {
  display: none;
}
.pipe-separator:not(:empty) ~ .pipe-separator::before {
  content: " | ";
}
.pipe-separator.bullet:not(:empty) ~ .pipe-separator.bullet::before {
  content: " • ";
}

.pipe-separator:not(:empty) + .pipe-separator:empty::before, .pipe-separator:empty + .pipe-separator:empty::before {
  content: "";
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}