如何将样式应用于 class 和 SASS 中的媒体查询？

Question

在移动设备上，我的 header 必须始终保持粘性。在其他设备上，只有当它有 class sticky:

时它才必须是粘性的

.header {
  &.sticky {
    position: fixed;
    // other styles
  }
}

@media only screen and (max-width: 600px) {
  .header {
    position: fixed;
    // other styles
  }
}

我只想写一次样式（DRY 原则），有没有办法用 SASS 实现？

它可能看起来像：

.header {
  @include media_600,
  &.sticky {
    position: fixed;
  }
}

.. 或类似的东西，但我不知道是什么。

Answer 1

我认为您的方向是正确的。使用内容块 (https://sass-lang.com/documentation/at-rules/mixin#content-blocks) 创建混合将允许您添加样式而无需再次指定选择器，还可以让您在整个代码中重用它。

@mixin mobile {
  @media only screen and (max-width: 600px) {
    @content;
  }
}

.header {
  &.sticky {
    position: fixed;
  }

  @include mobile { 
    position: fixed;
  }
}

如果你只想写一次 CSS 属性那么你可以这样做。

@mixin sticky-header {
  position: fixed;
}

.header {
  &.sticky {
    @include sticky-header;
  }

  @media only screen and (max-width: 600px) { 
    @include sticky-header;
  }
}

如何将样式应用于 class 和 SASS 中的媒体查询？

How to apply styles to both a class and a media query in SASS?

css

dry

sass