Question

我在scss类中使用了media query，我想创建媒体查询并定义该媒体查询中的所有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;
      }
     }
    }

Answer 1

Sass 3.2添加了@content指令，它使我们可以将内容块传递到mixin中，如下所示：

 @mixin screen($size) {
  $desktop: "(min-width: 1024px)";
  $tablet: "(min-width: 768px) and (max-width: 1023px)";
  $mobile: "(max-width: 767px)";
  @if $size == desktop {
    @media only screen and #{$desktop} {
      @content;
    }
  }
  @else if $size == tablet {
    @media only screen and #{$tablet} {
      @content;
    }
  }
  @else if $size == mobile {
    @media only screen and #{$mobile} {
      @content;
    }
  }
  @else {
    @media only screen and #{$size} {
      @content;
    }
  }
}


.wrapper {
  margin: 0 auto;
  width: 100%;
  @include screen('tablet') {
    width: 90%;
  }

  @include screen('desktop') {
    width: 85%;
  }
}

如果您有任何疑问，请随时提问。

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

1 个答案: