sass - 将媒体查询与合格选择器相结合的语法

Question

在我们当前的设计中，表单元素在移动设备上的样式不同:

@media screen and (max-width: 759px) {
    form label {
        display: block;
        float: none;
    }
    /*There's more...*/
}

鉴于屏幕空间有限，我们基本上是在强制使用垂直表单布局(classic uxmatters link 中的#3-4)。

因为某些表单标签必须非常冗长出于合理的原因，我们现在希望将此样式应用于某些桌面表单，即超出媒体查询范围。但是，这是无效的 SASS 语法:

@media screen and (max-width: 759px), .vertical-form {
    /*...*/
}

如何将规则集应用于媒体查询中的输出 和 至.vertical-form form label (或者，理想情况下， form.vertical-form label )元素？

Answer 1

媒体查询不是选择器，它们是特殊的语言结构。您不能将它们与媒体查询以外的任何内容结合起来。您将不得不使用 mixin 来执行您所要求的操作，因为扩展也不适用于媒体查询。

@mixin vertical-form {
    label {
        display: block;
        float: none;
    }
}

@media screen and (max-width: 759px) {
    form {
        @include vertical-form;
    }
}

.vertical-form {
    @include vertical-form;
}