应该如何格式化我的scss类名来达到此效果？

Question

我正在尝试在侧边栏效果中创建幻灯片。

使用scss给侧边栏设置了一个宽度，然后将其向右偏移该宽度。

然后我想应用sidebar--is-open类，并显示侧边栏。

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  right: -400px;
  width: 400px;
  background-color: #444444; 

  &--open {
    right: 0;
  }
}

我希望这种状态

<div class="sidebar">
...
</div>

要更改为此

<div class="sidebar sidebar--is-open">
...
</div>

但是在开发工具中什么也没发生。

我可以看到已经应用了新类，但是css并没有生效，看来类没有针对它的css。