如何从子元素中删除顶部或根部 class

Question

我正在尝试转译这个 scss to css

输入

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

输出

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

预期输出

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

在我的输出 .abc class 中添加了所有项目。我希望它应该只添加到顶部元素？

如何从子元素

中移除.abcclass

Answer 1

如果只有这两行我就手动编辑吧。另一种方法是在转换之前删除 .abc class，然后仅将其添加回 CSS 所需的位置。

Answer 2

无法使用父级选择器。我能想到的唯一方法是将 .slider class 存储在您的根变量中：

.abc {
  $root: ".slider";

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

如何从子元素中删除顶部或根部 class

how to remove top or root class from child element

html

javascript

css

sass

less