Css SASS媒体查询混合组合

我有一个用于媒体查询的SASS mixin，它工作得很好，特别是在嵌套时，但问题是我似乎不知道如何编写mixin，以便可以组合不同的媒体查询。是否有一种方法可以保持mixin的简单性，但允许多个组合查询

例如：

@include media(tablet-p) and media(phone) {
     width: 100%;
}

下面是我当前的mixin，包括我当前如何使用它

@mixin media($size) {
    @if $size == laptop {
        @media screen and (min-width:1201px) and (max-width:1440px) {
            @content;
        }
    } @else if $size == tablet-l {
        @media screen and (min-width:1024px) and (max-width:1200px) {
            @content;
        }
    } @else if $size == tablet-p {
        @media screen and (min-width:768px) and (max-width:1023px) {
            @content;
        }
    } @else if $size == phone {
        @media screen and (max-width: 767px) {
            @content;
        }
    }
}

@include media(phone) {
    width: 100%;
}

---

请不要这样认为，但这不是一个简单的混合，或灵活

有一个变量或断点的映射，以及一个接受这些变量的mixin。我首先使用手机，所以我总是从手机风格开始，所以我最常用的情况是

小型

，

中型

，即

最小宽度

。有时，你不得不使用

到small

等

$breakpoints: (
  'to-small'      : ( max-width:  766px ),
  'small'         : ( min-width:  767px ),
  'to-medium'     : ( max-width:  991px ),
  'medium'        : ( min-width:  992px ),
  'to-large'      : ( min-width: 1199px ),
  'large'         : ( min-width: 1200px ),
  'to-x-large'    : ( min-width: 1599px ),
  'x-large'       : ( min-width: 1600px )
);

混合

用法

---

谢谢我理解。在您的示例中，您可以使用多个媒体查询在各种大小上使宽度达到25%吗？我以前没有见过这样的情况，所以我会说不，但我可能错了。因此，即使有可能，我也不想混合媒体查询：）@约翰：为什么不呢？有时候，手机和平板电脑的人像风格是一样的，所以你必须把所有东西都写两遍，否则呢？@JohnthePainter，这取决于你如何构建css。让我用一个更好的例子来更新我的答案

@mixin media($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media #{inspect(map-get($breakpoints, $breakpoint))} {
      @content;
    }
  }

  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Please make sure it is defined in `$breakpoints` map.";
  }
}

.block {
  width: 100%;

  // this query will apply from widths larger then 1200px
  // meaning you have the same for mobile and tablet
  @include media('large') {
    width: 25%;
  }
}

.block {
  width: 100%;

  // this query will apply from widths larger then 992px (landscape tablet)
  // meaning you have the same for mobile and tablet portrait
  @include media('medium') {
    width: 25%;
  }
}