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文件中输入它时，编译时会发生错误。像选择器一样，甚至没有成为目标。

我该如何解决这个问题？

谢谢。

Answer 1

&会在此确切位置转换为 现有选择器 。这意味着这个

.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 2

您要编写的内容是无效的SCSS。请记住，＆amp;嵌套时始终引用父选择器。

所以你的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 3

更干净的解决方案可以在不破坏BEM方法的情况下使用带有伪类（例如:not()）的嵌套SCSS：

.holder {
  $holder: &;

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

为什么此SCSS选择器不起作用

3 个答案: