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;
}

<击>

为了审美，我更喜欢将选择器放在多行上。当选择器较长时，换行符有助于区分它们。

我也喜欢多行的样式。如果你在选择器中有超过三个或四个，它可能会让人感到困惑。

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

根据此MDN article：

以逗号分隔的列表

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

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

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

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

1 个答案:

以逗号分隔的列表