html - 没有 !important，媒体查询在 SCSS 中不起作用

Question

里面是.modalBox类的代码

.modalBox {

  //modalBox styles
  &#{&} {
    margin: 0 auto;
    position: absolute;
    background-color: $brand-dark;
    left: calc(50% - (#{$modalBox-width} / 2));
    top: calc(50% - (#{$modalBox-height / 2} + #{$modalBox-padding-bottom / 2}));
    width: $modalBox-width;
    height: $modalBox-height;
    text-align: center;
    align-items: center;
    padding: $modalBox-padding-top $modalBox-padding-left-right $modalBox-padding-bottom;
  }

  //Inner main modalBox div
  &--inner {
    position: absolute;
    bottom: 0;
    padding: 0 em(50) em(25);
    left: 0;
  }
}

这是我正在尝试使用的媒体查询

@media screen and (max-width: em(602)) {
  .modalBox {
    width: 90%;
  }
}

如果没有 !important，此查询将无法运行，我不知道如何处理它。如果您有任何建议，请告诉我

Answer 1

尝试将 &#{&} 更改为 &。奇怪的是，.modalBox.modalBox 比 .modalBox

更具体