CODEWITHSUNDEEP
cssvariablesless
einord
einord

Reputation: 2325

css, change less variable with @media

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

Upvotes: 12

Views: 7868

Answers (2)

Erick Boileau
Erick Boileau

Reputation: 494

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

Upvotes: -3

ScottS
ScottS

Reputation: 72261

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:

Upvotes: 10

Related Questions