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

有.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，此查询将不起作用，并且我不知道该如何处理。如果您有任何建议，请让我知道

最佳答案

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