使用媒体查询保持 SASS 代码 DRY

Question

我有两个媒体查询。一个用于手机，另一个用于平板电脑。他们都要求相同的样式。在这种情况下，保留此代码DRY 的最佳方法是什么？

$mobile-portrait: "only screen and (max-width: 680px)";
$tablet-portrait: "only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)";

div {
    background: gray; margin: 0 auto; height: 50px; width: 50px;

    @media #{$mobile-portrait} {
        height: 100px; width: 100px;
    }

   @media #{$tablet-portrait} {
       height: 100px; width: 100px;
   }
}

Answer 1

我不确定有什么好的方法可以做到这一点，但你总是可以创建多个选择器。 （我不知道这是否是最佳做法，但我会这样做。）

罢工>

@media #{$mobile-portrait},
@media #{$tablet-portrait} {
   height: 100px;
   width: 100px;
}

编辑：以下也是有效的。

@media #{$mobile-portrait}, @media #{$tablet-portrait} {
   height: 100px; width: 100px;
}

为了美观，我更喜欢将选择器放在多行上。 When there are longer selectors, the line break helps differentiate between them.

我也更喜欢多行的样式。如果选择器中有超过 3 或 4 个，可能会让人感到困惑。

编辑 2：在媒体查询中，逗号实际上就像一个逻辑 or。

据此MDN article：

逗号分隔列表

在媒体查询中使用逗号分隔的列表时，其行为类似于逻辑运算符or。使用逗号分隔的媒体查询列表时，如果任何媒体查询返回 true，则应用样式或样式表。逗号分隔列表中的每个媒体查询都被视为一个单独的查询，应用于一个媒体查询的任何运算符都不会影响其他查询。这意味着逗号分隔的媒体查询可以针对不同的媒体特征、类型和状态。

这意味着第二个@media 是不必要的：

@media #{$mobile-portrait}, #{$tablet-portrait} {
    height: 100px;
    width: 100px;
}