css - 是否可以在具有非媒体查询修饰符类的媒体查询中重用 css 样式？

Question

例如，假设我有一个人为设计的卡片概念:

<div class="Card">
  <div class="Card-author">{{author}}</div>
  <div class="Card-body">{{body}}</div>
  <div class="Card-timestamp">{{timestamp}}</div>
</div>

它有很多样式，并且对小屏幕媒体查询下的样式有相当多的更改:

.Card {...}
.Card-author {...}
.Card-body {...}
.Card-timestamp {...}

@media (max-width: 981px) {
  .Card-author {...}
  .Card-body {...}
  .Card-timestamp {...}
}

如果我想在该屏幕尺寸上方显示这个小版本的卡片(例如，如果我想在侧边栏中显示这个版本的卡片)，我是否可以轻松地重复使用这些样式？

类似于:

<div class="Card Card--small">  <!-- NOTICE ADDITIONAL CLASSNAME -->
  <div class="Card-author">{{author}}</div>
  <div class="Card-body">{{body}}</div>
  <div class="Card-timestamp">{{timestamp}}</div>
</div>

在 html 中，我可以轻松地将那个“修饰符”类添加到卡片组件，但是我如何在 css 中完成这个，而不是在两个地方(媒体查询 block 和卡片--)复制这个“小”卡片样式小块？

@media (max-width: 981px) {
  .Card-author {...}
  .Card-body {...}
  .Card-timestamp {...}
}
.Card--small {
  /* Same exact styles as the media query rules above */
  .Card-author {...}
  .Card-body {...}
  .Card-timestamp {...}
}

Answer 1

既然你用 sass 标记了它，我假设你可以使用标准的 SASS mixins。方法如下:

@mixin Card--small {
    .Card-author {...}
    .Card-body {...}
    .Card-timestamp {...}
}

.Card--small {
  @include Card--small;
}
@media (max-width: 981px) {
  @include Card--small;
}