12

I'm currently on a site project that is responsive and less is really helping out a lot.

But I want a size variable to change depending on window size. I've tried the following code, but it doesn't seem to work. Is this possible, or should I try another aproach?

@menu-width: 300px; // default size

@media only screen and (max-width: 400px) {
  @menu-width: 100px // smaller size
}

.menu {
  width: @menu-width;
}
einord
  • 2,278
  • 2
  • 20
  • 26
  • There is no pure CSS way to know user's window size. If you want to stay with CSS, the best you could do is to use percentages. The other route is to use a scripting language like JavaScript to catch the size of the window. – dan Apr 10 '13 at 13:56
  • 2
    Possible duplicate of [CSS pre-processor with a possibility to define variables in a @media query](http://stackoverflow.com/questions/14139067/css-pre-processor-with-a-possibility-to-define-variables-in-a-media-query). This is not the nature of what `@media` does, which is purely a CSS ability, not a LESS preprocessor ability. See the duplicate question link for further explanation. – ScottS Apr 10 '13 at 13:59
  • so you just want different code for different resolutions? – chriz Apr 10 '13 at 13:59

2 Answers2

9

Since I don't seem to be getting a lot of support for closing this as a duplicate of this question, I'll essentially repeat my answer (with some variety).

Remember @media is a CSS query, not a LESS query

The @media query is a CSS capability that allows the currently loaded CSS to respond to the media it is being presented on (typically some type of browser, but could be print, etc.).

LESS is a CSS preprocessor that creates CSS before it is loaded into the browser, and thus before the media is ever being checked (which is done in the CSS itself, after it has been generated by LESS).

So the proper method for LESS is to have the same type of output as straight CSS, which means you have to repeat the .menu selector in the @media query so that its value changes for the media type.

Final CSS Output Should Be Something Like

@media only screen and (max-width: 400px) {
  .menu {
    width: 100px; 
  }
}

.menu {
  width: 300px;
}

There are various ways to generate something like that with LESS. Strictly taking your basic format above, there is this:

@menu-width: 300px; // default size

@media only screen and (max-width: 400px) {
  .menu {
    width: @menu-width - 200px; /* assuming you want it dynamic to default */
  }
}

.menu {
  width: @menu-width;
}

But also look at:

Community
  • 1
  • 1
ScottS
  • 71,703
  • 13
  • 126
  • 146
  • I am aware of @media not being a LESS functionality, but was hoping that it somehow could help me repeating the .menu selector automatically. Since it doesn't seem able to, I followed your first example manually. – einord Apr 11 '13 at 14:28
-3

yes but in that way you must rewrite all

the best way should be (but it doesnt work)

@w : 10px

@media (min-width: 1440px) {

    @w:500px;

}
@media (min-width: 1024px) and (max-width: 1280px) {

@w:300px;

}

@media (min-width: 800px) and (max-width: 1020px) {

    @w:200px;
}

.any{
        width:@w;
    }
Erick Boileau
  • 478
  • 4
  • 14