为什么这个 SCSS 选择器不起作用

Question

我有这个HTML:

<div class="holder">
   <span class="holder__title">TITLE ONE</span>
</div>
<div class="holder">
   <span class="holder__title">TITLE TWO</span>
</div>
<div class="holder">
   <span class="holder__title">TITLE THREE</span>
</div>

现在，我只想修改 TITLE TWO 和 TITLE THREE spans 并保留第一个，但我无法让它工作。这是我试过的：

.holder {
   &:not(:first-child) {
      &__title {
        display:none; // just to test
     }
  }
}

和

.holder {
  &:nth-child(n+2):nth-child(-n+3) {

    &__title {
      display:none; // just to test
    }
  }
}

它在开发者工具中工作正常，但是当我在 .scss 文件中输入它并编译时，什么也没有发生。 Like 选择器甚至都没有目标。

请问我该如何解决？

谢谢。

Answer 1

您尝试写入的内容无效 SCSS。请记住，& 在嵌套时始终引用父选择器。

所以你的SCSS

.holder {
   &:not(:first-child) {
      &__title {
        display:none; // just to test
     }
  }
}

将转换为无效的 CSS：

.holder:not(:first-child) .holder:not(:first-child)__title {
   display:none; // just to test
}

一个解决方案是：

.holder {
   &:not(:first-child) {
      .holder__title {
        display:none;
     }
  }
}

尽管如此，这会破坏 BEM 表示法。不过，如果没有更好的答案出现，我会把它留在这里。

Answer 2

& 转换为 现有选择器在这个确切点。这意味着这个

.holder {
   &:nth-child(n+2):nth-child(-n+3) {
     ...some-rule...
     &__title {
       ...other-rule...
     }
   }
 }

翻译成这个CSS：

.holder:nth-child(n+2):nth-child(-n+3) {
  ...some-rule...
}
.holder:nth-child(n+2):nth-child(-n+3)__title {
  ...other-rule...
}

如果你真的热衷于正确地做它，你应该把 .holder 放在一个变量中，它不会破坏 BEM（你只能从一个地方改变它）：

$name: '.holder';
#{$name} {
   &:nth-child(n+2):nth-child(-n+3) {
     ...some-rule...
     #{$name}__title {
       ...other-rule...
     }
 }

转化为：

.holder:nth-child(n+2):nth-child(-n+3) {
  ...some-rule...
}
.holder:nth-child(n+2):nth-child .holder__title {
  ...other-rule...
}

Answer 3

在不破坏 BEM 方法的情况下，将嵌套 SCSS 与伪 class（如 :not()）一起使用的更简洁的解决方案是：

.holder {
  $holder: &;

   &:not(:first-child) {
      #{$holder}__title {
        display:none;
     }
  }
}

为什么这个 SCSS 选择器不起作用

Why is this SCSS selector not working

html

css

sass

bem