SASS嵌套混合问题

我目前正在处理以下问题（注意：实际的mixin有点复杂，我已经简化了它们，但我确实希望使用mixin实现这种方法）

我有一些断点的混入：

@mixin sm {
    @media (max-width: 740px) {
        @content;
    }
}
@mixin lg {
    @media (min-width: 741px) {
        @content;
    }
}

我用这个mixin将边距应用于一个元素（实际的mixin有点复杂）

所以基本上，我在一个元素上使用mixin，根据视口的大小，元素得到不同的边距。问题是：如果我想对一个元素使用边距混合，但只在较大的视口大小上使用，我会得到如下结果：

.foo {
    @include lg {
        @include margin;
    }
}

@media (min-width: 741px) {
  .foo {
        margin: 20px; 
    } 
}

现在输出为：

@media (min-width: 741px) and (max-width: 740px) {
  .foo {
      margin: 10px; 
    } 
}   
@media (min-width: 741px) and (min-width: 741px) {
  .foo {
        margin: 20px; 
    } 
}

这是有道理的，但我希望有这样的输出：

.foo {
    @include lg {
        @include margin;
    }
}

@media (min-width: 741px) {
  .foo {
        margin: 20px; 
    } 
}

理想情况下，我不会在margin mixin中包含断点mixin，但我想不出任何其他方法。有人知道这是否可能吗

---

谢谢

我能想到的一种简单易用的方法是，通过条件和可选参数扩展保证金混入，以便在必要时排除特定的媒体查询

@mixin margin($sm: true, $lg: true) {
    @if $sm {
      @include sm {
          margin: 10px;
      }
    }
    @if $lg {
      @include lg {
          margin: 20px;
      }
    }
}

.margin {
  @include margin;
}

.margin-only-on-lg {
  @include margin(false, true);
}

使用mixin仍然很简单，并且只需要在mixin本身中使用媒体查询。它也非常健壮，因此，如果开发人员不知道可选参数，他可以在不破坏逻辑的情况下执行以下操作

.foo {
    @include lg {
        @include margin;
    }
}

当然，它会输出一些不必要的CSS。如果您在这里看到问题和/或希望采用更灵活的方法将不同的具体边距值作为参数传递，那么下面的修改结合编译时（参见我的答案）可能是更好的方法：

@mixin margin($sm: false, $lg: false) {
    @include sm {
      margin: warn-on-false("margin()", $sm, 10px);
    }
    @include lg {
      margin: warn-on-false("margin()", $sm, 20px);;
    }
}

.margin {
  @include margin(null, null); // I'm aware of the parameters, but use the default values
}

.margin-only-on-lg {
  @include margin(0, null); // set margin to 0 on small screen size; use default for lg 
}

---

这样，由于不了解可选参数而定义

.foo

类的上述（不希望的）方法会在编译时导致警告，此外，开发人员可以在特殊情况下使用不同的边距值。当然，也可以简单地使用布尔参数并将其设置为必填项。

我尽量简短，但如果您对这种方法有任何意见、顾虑或问题，请随时告诉我，我将详细说明。如果您有问题中未说明的其他限制，但使此方法的使用变得困难，我相信我们会找到处理此问题的方法。您好，Marvin，很抱歉回复太晚。我想我想做的是不可能的，所以我采用了类似于你的方法。谢谢你的帮助！