Fancy Media Queries with some LESS Magic

Question

It would be nice to wrap css-styles for different resolutions within some css-classes using less.

I\'d like to do something like:

footer {
  width: 1         


        

Answer 1

I completely agree with Hai Nguyen's answer (which has been accepted) but you can clean it up a bit more by doing something like this:

@desktop:   ~"only screen and (min-width: 960px) and (max-width: 1199px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";

footer{
  width: 100%;
  @media @tablet {
    width: 768px;
  }
  @media @desktop {
    width: 940px;
  }
}

It's essentially the same thing but lets you nest your media queries inside of the original selector. It keeps all css for a specific element together and makes your styles much more modular (vs the split breakpoint approach).