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

将媒体查询与限定选择器组合在一起的语法

1 个答案: