如何改变顺序的渲染包括混合

Question

这是一个很难的问题，所以我知道可能没有人能想出解决方案，但这是我真正需要在我的框架中解决的问题。

我有一个用SCSS编写的screen() mixin，它以$size为参数，返回任何包装在媒体查询中的@content。

当一个元素@include与多个屏幕()混合时发生问题，因为产生的媒体查询将以与包含它们相同的顺序相互覆盖。如何确保生成的媒体查询将以正确的顺序呈现(从最大屏幕到最小屏幕)，即使我忘记以正确的顺序包含它们?

http://sassmeister.com/gist/951520fa83d1e1c69c9d

@mixin screen(
  $size: null
){
  @if $size == md {
    @media (max-width: 1024px) {
      @content;
    }
  }
  @if $size == sm {
    @media (max-width: 768px) {
      @content;
    }
  }
  @if $size == xs {
    @media (max-width: 320px) {
      @content;
    }
  }
}
/* output should be 1024, 768, 320 */
.screen {
  &:before {
    // this should be included as the Last one
    @include screen(xs){
      content: "xs";
    }
    @include screen(sm){
      content: "sm";
    }
    // this should be included as the First one
    @include screen(md){
      content: "md";
    }
  }
}

我试图通过创建占位符选择器在正确的顺序%media-sm{...}, %media-xs {...}…，和@extend从mixin，但@content不能通过@extend指令传递。

另一个解决方案是一个困难的-创建一个数组键-大小和值- @contents，并从另一个函数呈现它们。

Answer 1

No。萨斯只会照你说的去做。

Answer 2

可能更容易传入您试图瞄准的媒体宽度:

@mixin media($width) {
  @media only screen and (max-width: $width) {
    @content;
  }
}
@include media(320px) {
  background: red;
}