sass - 将原始选择器与 mixin 组合成单个查询

Question

我有以下 SASS 规则：

  p {
    margin: 0;
  }
  @include desktop() {
    p {
      margin: 0;
    }
  }

混合是这样的：

@mixin desktop() {
  @media screen and (min-width: 1200px) {
    @content;
  }
}

在代码库的其他地方，在桌面上设置了一个边距，因此在这种情况下，我也需要在桌面断点上显式地删除它，只是有第一个p选择器规则并不能削减它。

margin: 0有没有一种巧妙的方法来组合选择器，因为两次使用相同的规则感觉很冗长？我意识到继承可能存在更根本的问题，但这超出了问题的范围。我不想使用!important.

非常感谢。

标签： sass

Answer 1

有没有一种巧妙的方法来组合选择器？当然有......只需使用另一个mixin：

@mixin para {
    p {
        margin: 0;
    }
}

@include para;

@include desktop {
    @include para;
}

您显然已经知道如何使用 mixin，所以我假设您的问题实际上是关于是否可以将一个 mixin 嵌套在另一个 mixin 中（yes），或者是否可以在 mixin 中包含选择器（yes）。