Fancy Media Queries with some Less Magic

less-media-query.less

/* 
	http://stackoverflow.com/questions/15837808/fancy-media-queries-with-some-less-magic
	
	setup
	
*/

@xs-min: 480px;
@sm-min: 768px;
@md-min: 992px;
@lg-min: 1200px;

@xs-max: (@sm-min - 1);
@sm-max: (@md-min - 1);
@md-max: (@lg-min - 1);

@phone:          ~"only screen and (min-width: @{xs-min})";
@phone-strict:   ~"only screen and (min-width: @{xs-min}) and (max-width: @{xs-max})";
@tablet:         ~"only screen and (min-width: @{sm-min})";
@tablet-strict:  ~"only screen and (min-width: @{sm-min}) and (max-width: @{sm-max})";
@desktop:        ~"only screen and (min-width: @{md-min})";
@desktop-strict: ~"only screen and (min-width: @{md-min}) and (max-width: @{md-max})";
@large:          ~"only screen and (min-width: @{lg-min})";

/* 
	usage
*/

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