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";
    }
  }
}

我尝试通过从mixin以正确的顺序%media-sm{...}，%media-xs {...} ...和@extend创建占位符选择器来解决该问题，但@content可以不能通过@extend指令传递。

另一个解决方案是难度很大 - 创建一个键数组 - 大小和值 - @contents并从另一个函数渲染它们。

Answer 1

没有。 Sass只会完全按照你的要求去做。如果您希望样式按特定顺序显示，请按特定顺序编写它们。

Answer 2

可能更容易传递您尝试定位的媒体宽度：

@mixin media($width) {
  @media only screen and (max-width: $width) {
    @content;
  }
}

@include media(320px) {
  background: red;
}

SCSS如何更改渲染的顺序包括mixins

2 个答案: