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

【问题标题】：Is it possible to re-use css styles in a media query with a non-media query modifier class?是否可以在具有非媒体查询修饰符类的媒体查询中重用 css 样式？
【发布时间】：2018-04-05 21:58:26
【问题描述】：

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

<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 {...}
}

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

类似：

<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 中完成此操作，而不是在两个地方（媒体查询块和卡片）复制这个“小”卡片样式小块？

@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 {...}
}

【问题讨论】：

标签： css sass media-queries

【解决方案1】：

既然你用 sass 标记了它，我假设你可以使用标准的 SASS 混合。操作方法如下：

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

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

【讨论】：

【解决方案2】：

移动优先方法将帮助您解决这个问题。不要将Card--small 应用于卡片的sibebar 版本，而是将Card--large 类用于主卡片并将移动CSS 设为新的默认值。

/* mobile-first styles */
.Card {...}
.Card-author {...}
.Card-body {...}
.Card-timestamp {...}

@media (min-width: 982px) {
  /* style modifications for large screens */
  .Card--large {
    .Card-author {...}
    .Card-body {...}
    .Card-timestamp {...}
  }
}

【讨论】：