SCSS: использовать амперсанд в псевдо-классе

Question

   .my-class {
      &:before{
        content:"";
        display:block;
        background:red;
        h1 ????{
          padding-top: 5px
        }
      }
    }

можно ли использовать & в этом месте, чтобы иметь вывод как

h1.my-class:before {
  padding-top: 5px
}

Answer 1

Вам нужно SCSS это таким образом ::

.my-class {
  &:before {
    content: "";
    display: block;
    background: red;
    @at-root h1 {
      &.my-class {
        &:before {
          padding-top: 5px;
        }
      }
    }
  }
}