将原始选择器与 mixin 组合成单个查询答案

【问题标题】：Combine raw selector with mixin into single query将原始选择器与 mixin 组合成单个查询
【发布时间】：2021-09-13 08:02:49
【问题描述】：

我有以下 SASS 规则：

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

mixin是这样的：

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

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

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

非常感谢。

【问题讨论】：

标签： sass

【解决方案1】：

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

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

@include para;

@include desktop {
    @include para;
}

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

【讨论】：