how to remove top or root class from child element

I am trying to transpile this scss to css

input

.abc{
  .slider {
    $root: &;
    &--fade {
      > #{$root}__track {
        > #{$root}__list {
          > #{$root}__slide {
            .rh08w5 {
              opacity: 0;
              h2 {
                opacity: 0;
              }
             
           
            }
          
          }
        }
      }
    }
  }
}

output

.abc .slider--fade > .abc .slider__track > .abc .slider__list > .abc .slider__slide .rh08w5 {
  opacity: 0;
}
.abc .slider--fade > .abc .slider__track > .abc .slider__list > .abc .slider__slide .rh08w5 h2 {
  opacity: 0;
}

expected output

.abc .slider--fade > .slider__track > .slider__list > .slider__slide .rh08w5 {
  opacity: 0;
}
.abc .slider--fade > .slider__track > .slider__list > .slider__slide .rh08w5 h2 {
  opacity: 0;
}

In my output .abc class added in all item . I want it should add only on top element ?

how to remove .abc class from child element

Answer

It’s not possible using the parent selector. The only way I can think of is to store the .slider class in your root variable instead:

.abc {
  $root: ".slider";

  #{$root} {
    &--fade {
      > #{$root}__track {
        > #{$root}__list {
          > #{$root}__slide {
            .rh08w5 {
              opacity: 0;
              h2 {
                opacity: 0;
              }
            }
          }
        }
      }
    }
  }
}