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

Answer 1

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. :)