Media-query can now be a variable

[mrcljx]

As a follow-up to #634 I found it really annoying to have the same, repetitive media-queries flying around in my document. Normally I design for 2-4 resolutions/viewports:

1. Handheld (iPhone, Android)
2. Tablets / Subnotebooks
3. Regular Desktops
4. 22''+ Displays

Ways to handle that:

1. Annoying @media screen and max-width(600px) { ...
2. Better @media screen and max-width(@tabletWidth) { ...
3. Preferred @media @tablet { ...

This Pull-Requests allows the latter option. I wanted to avoid pollution of the variable-definition-parser, so you have to define @tablet like this:

@tablet: ~"screen and max-width(600px)";

You can still use string-interpolation if you have 600px defined somewhere else and don't want to hard-wire it into that string.

[joeldrapper]

+1 Thats a fantastic idea. Can't wait to use this.

[Anahkiasen]

+1

[souldreamer]

+1

[davesimon]

@sirlantis is on a roll.

[cloudhead]

I like this

[cloudhead]

Merged.

[httpete]

This is an insanely great idea, managing one of the trickiest things now. Is this in 1.2.2?

[aphillipo]

Hi guys,

Is there any way of conditionally including responsive code easily.

Essentially I would like a variable in my root less file like so: @isResponsive: false; and for that to decide if at compilation time that the stylesheet for 900px+ is included for all browsers when is responsive is false and when @isResponsive is true we use the standard media queries for this.

Any ideas on how to accomplish this would help use to future proof our sites immensely.

Thanks,

Andy.

[DesignByOnyx]

@aphillipo - I am trying to get a solution to that problem. The only real way to accomplish this would be fore LESS to implement a SASS-like @content variable so you could write code like this:

@isResponsive: true;
@handheld-up: ~"screen and (min-width: 30em)";
@handheld-down: ~"screen and (max-width: 48em)";
@handheld-only: ~"screen and (min-width: 30em) and (max-width: 48em)";
@tablet-up: ~"screen and (min-width: 48em)";
@tablet-down: ~"screen and (max-width: 60em)";
@tablet-only: ~"screen and (min-width: 48em) and (max-width: 60em)";

// @@content is a special variable with the "contents" of the style declaration
// The double @@ sign is just something I chose to distinguish it from a normal variable
.mq-style(@breakpoint) when (@isResponsive = true) {
    @media @breakpoint {
        @@content;
    }
}
.mq-style(@breakpoint) when (@isResponsive = false) and (@breakpoint = @handheld-up) {
    @@content;
}
.mq-style(@breakpoint) when (@isResponsive = false) and (@breakpoint = @tablet-up) {
    @@content;
}

.some-element {
    .mq-style(@handheld-up) {
        /* This is the content be be used in place of the @content variable */
        color: blue;
        background: red;
    }

    .mq-style(@tablet-only) { {
        border: 1px solid red;
    }
}

[DesignByOnyx]

Just wanted to reference Issue #965, where we are trying to come up with a SASS-like @content solution.

[himedlooff]

@aphillipo @DesignByOnyx there's a way you can achieve what you're looking for by using LESS string interpolation to change a media query into a media type (which is supported down to IE6). For example: @media only screen and (min-width:768px) { ... } to this... @media screen { ... }. I'm documenting the method here: https://github.com/himedlooff/media-query-to-type

[DesignByOnyx]

@himedlooff - great solution. You should point out that all "min-width" media query variables should be overwritten for the IE build. For example:

/* variables.less */
@mobileUp: "only screen and (min-width: 320px)";
@mobileOnly: "only screen and (min-width: 320px) and (max-width: 480px)";
@tabletUp: "only screen and (min-width: 600px)";
@tabletOnly: "only screen and (min-width: 600px) and (max-width: 960px)";

/* IE-variable-overrides.less - used only for the IE build */
@mobileUp: "screen";
@tabletUp: "screen";

/* page-styles.less */
@media @mobileUp {
    ...
}

[himedlooff]

@DesignByOnyx thanks, great point!