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

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

类似的东西：

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

Answer 1

移动优先方法将帮助您解决此问题。不要将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 {...}
  }
}

Answer 2

由于你用sass标记了这个，我假设您使用标准的SASS mixin。以下是如何做到这一点：

{{1}}

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

2 个答案: