Fancy Media Queries with some LESS Magic

css, less, media-queries, responsive-design

Solution

Here is what I've done in my projects:

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

@media @desktop {
  footer {
    width: 940px;
  }
}

@media @tablet {
  footer {
    width: 768px;
  }
}

This allows you to only define your media queries once and you can use it throughout your less files. Also a little easier to read. :)

Problem

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: 100%; } .tablet { footer { width: 768px; } } .desktop { footer { width: 940px; } } ``` At the end something like this should be the result: ``` footer { width: 100%; } @media screen and (min-width: 768px) { footer { width: 768px; } } @media screen and (min-width: 992px) { footer { width: 940px; } } ``` .tablet could look somehow like this: ``` @media screen and (min-width: 768px) { .tablet { } } ``` Hope somebody has a nice idea!

Original source

Related problems