如何从子元素中删除顶级或根类答案

【问题标题】：how to remove top or root class from child element如何从子元素中删除顶级或根类
【发布时间】：2021-10-28 20:15:06
【问题描述】：

我正在尝试转译此 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 类中添加了所有 item 。我希望它应该只添加在顶部元素上？

如何从子元素中删除.abc 类

【问题讨论】：

如果我看到这样的 CSS 选择器，我的代码异味检测器会发出警报！ (en.wikipedia.org/wiki/Code_smell) 你需要如此深入的特异性对我来说似乎很奇怪，也许从不同的角度解决问题会更有益：尝试简化 css 选择器，也许你不需要删除 .abc 类完全没有。

标签： javascript html css sass less

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

.abc {
  $root: ".slider";

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

【讨论】：