scss中的兄弟选择器 & scss常见编译规则总结

scss中的兄弟选择器

• 问题背景

  • 当想要hover到元素A的时候，修改元素的display状态。

  • 一开始使用了下面代码

    .elementA{
      &:hover{
        .elementB{
          display: block;
        }
      }
    }
    

    但实际上，上面的scss代码将会编译为

    .elementA:hover .elementB, .elementB:hover .elementB{
      display: block;
    }
    

    由于在scss中，换行符将会被编译为后代选择器。

    所以我们可以看到，当元素B不是元素A的子元素时，上面的scss是不会起作用的。

• 解决方法

  • 使用兄弟选择器

    .elementA{
      &:hover + .elementB{
        display: block;
      }
    }
    

    上面的scss将被编译为

    .elementA:hover + .elementB, .elementB:hover + .elementB{
      display: block;
    }
    

• scss常见编译规则总结（scss在线编辑器 https://www.sassmeister.com/）

  • 换行符
    • 编译为后代选择器。
  • &
    • 编译为父级元素。
  • • 编译为兄弟选择器。