SASS嵌套混合问题

Question

我目前正在努力解决以下问题（注意：实际的 mixins 有点复杂，我已经对其进行了简化，但我确实想在这种方法中使用 mixins）

我有一些断点的混入：

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

我有这个 mixin 来为元素应用边距（实际的 mixin 有点复杂）

@mixin margin {
    @include sm {
        margin: 10px;
    }
    @include lg {
        margin: 20px;
    }
}

所以基本上，我在一个元素上使用 mixin，并根据视口大小，元素获得不同的边距。问题是这样的：如果我想为一个元素使用边距混合，但只在一个大的视口尺寸上，我会得到这样的东西：

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

现在的输出变成：

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

这是有道理的，但我想要这样的输出：

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

理想情况下，我不会在边距混合中包含断点混合，但我想不出任何其他方法。有谁知道这是否可能？

谢谢！

Answer 1

我能想到的一种易于使用的方法是通过条件和可选参数扩展边距混合，以便在必要时能够排除特定的媒体查询。

@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。如果您在此处发现问题和/或如果您希望采用更灵活的方法将不同的具体边距值作为参数传递，则在编译时结合warnings for missing optional parameters 进行以下修改（请参阅我的答案）可能是更好的方法：

@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类的上述（不受欢迎的）方式由于缺乏对可选参数的了解导致编译时出现警告，此外开发人员可以在特殊情况下使用不同的边距值。当然，也可以简单地使用布尔参数并使其成为强制性参数。