Media-query can now be a variable #643

merged 2 commits into from Feb 28, 2012


None yet

10 participants


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.


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






@sirlantis is on a roll.


I like this

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


httpete commented Mar 2, 2012

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


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.



@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

Media query as a variable #95


@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 {
.mq-style(@breakpoint) when (@isResponsive = false) and (@breakpoint = @handheld-up) {
.mq-style(@breakpoint) when (@isResponsive = false) and (@breakpoint = @tablet-up) {

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

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


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


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

@DesignByOnyx thanks, great point!

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