css - 在 SASS 中，我可以在媒体查询和选择器中包装一堆样式规则吗

Question

我有一堆样式只需要应用于我的网站的桌面版本。我正在使用媒体查询来应用这些样式，但是为了避免在调整窗口大小时网站切换到移动设计，如果屏幕很大，我现在还在页面加载时添加了一个类。

目前我有

@media (min-width: $breakpoint) {
   // my styles
}

我将如何编写一个mixin来实现类似的东西

@media (min-width: $breakpoint),
.not-mobile {
   // my styles
}

Answer 1

这是我的解决方案

$breakpoint: 768px;

@mixin not-mobile {
  @media (min-width: $breakpoint) {
    @content;
  }
  .not-mobile {
    @content;
  }
}

Answer 2

您应该查看Breakpoint扩展的noqueries或Jacket的示例媒体查询后备 mixin。这些都是设计用于输出条件 css 规则的强大工具。