Syntax to combine media query with a qualifying selector

Question

In our current design, form elements get styled differently on a mobile device:

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

Given the limited screen space, we're basically forcing a vertical form layout (#3-4 in this classic uxmatters link).

Because some form labels have to be insanely verbose For sensible reasons, we now want to apply this style to some desktop forms, i.e. outside of scope of the media query. This, however, is invalid SASS syntax:

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

How can the ruleset be applied on output within the media query and to .vertical-form form label (or, ideally, form.vertical-form label) elements?

Answer 1

Media queries are not selectors, they are special language constructs. You can't combine them with anything other than media queries. You will have to use a mixin to do what you're asking for because extends don't work across media queries either.

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

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

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