Media-query can now be a variable #643

Merged
merged 2 commits into from Feb 28, 2012

Projects

None yet

10 participants

@sirlantis

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
Member

I like this

@cloudhead cloudhead merged commit 0086f1b into less:master Feb 28, 2012
@cloudhead
Member

Merged.

@httpete
httpete commented Mar 2, 2012

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.

@sirlantis sirlantis deleted the sirlantis:patch-media-query-variable branch Jan 8, 2013
@SomMeri SomMeri referenced this pull request in SomMeri/less4j Jan 24, 2013
Closed

Media query as a variable #95

@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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment