Sass 如何在媒体查询中引用嵌套的scss类？

我在scss类中使用了

媒体查询

，我想创建媒体查询并在该媒体查询中定义所有scss类。在媒体查询中访问嵌套的scss类时遇到问题。 这是我的密码

.data-one {
  display: flex;
  flex-wrap: wrap;
  &.mobile {
    width: 100%;
    .data {
      max-width: 100%;
    }
  }

  .data {
    height: 72px;
    margin-right: 10px;
    max-width: 224px;
    // @media (max-width: layout-breakpoint-tablet-start) {  -----------> This is the original code 
    //   display: none;
    // }
  }
}

这是我尝试过的，但它没有像预期的那样工作

@media (max-width: layout-breakpoint-tablet-start) {
  .data-one {
    +.data {
      display: none;
      }
     }
    }

添加了

@content

指令，该指令允许我们将内容块传递到mixin中，如下所示：

@mixin屏幕（$size）{
$desktop:“（最小宽度：1024px）”；
$tablet:“（最小宽度：768px）和（最大宽度：1023px）”；
$mobile:“（最大宽度：767px）”；
@如果$size==桌面{
@仅媒体屏幕和#{$desktop}{
@内容；
}
}
@如果$size==平板电脑，则为else{
@仅媒体屏幕和#{$tablet}{
@内容；
}
}
@如果$size==mobile，则为else{
@仅媒体屏幕和#{$mobile}{
@内容；
}
}
@否则{
@仅媒体屏幕和#{$size}{
@内容；
}
}
}
.包装纸{
保证金：0自动；
宽度：100%；
@包括屏幕（“平板电脑”）{
宽度：90%；
}
@包括屏幕（“桌面”）{
宽度：85%；
}
}

如果你对此有任何疑问，请随时提问