media-queries.less

@screen-xs: 480px;
@screen-sm: 600px;
@screen-md: 768px;
@screen-lg: 960px;

@screen-xs-min: @screen-xs;
@screen-sm-min: @screen-sm;
@screen-md-min: @screen-md;
@screen-lg-min: @screen-lg;

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

// Extra-small and up
.screen-xs-min(@rules) {
    @media (min-width: @screen-xs-min) {
        @rules();
    }
}

// Extra-small and down
.screen-xs-max(@rules) {
    @media (max-width: @screen-xs-max) {
        @rules();
    }
}

// Extra-small only
.screen-xs(@rules) {
    @media (min-width: @screen-xs-min) and (max-width: @screen-xs-max) {
        @rules();
    }
}

// Small and up
.screen-sm-min(@rules) {
    @media (min-width: @screen-sm-min) {
        @rules();
    }
}

// Small and down
.screen-sm-max(@rules) {
    @media (max-width: @screen-sm-max) {
        @rules();
    }
}

// Small only
.screen-sm(@rules) {
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
        @rules();
    }
}

// Medium and up
.screen-md-min(@rules) {
    @media (min-width: @screen-md-min) {
        @rules();
    }
}

// Medium and down
.screen-md-max(@rules) {
    @media (max-width: @screen-md-max) {
        @rules();
    }
}

// Medium only
.screen-md(@rules) {
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
        @rules();
    }
}

// Large and up
.screen-lg-min(@rules) {
    @media (min-width: @screen-lg-min) {
        @rules();
    }
}

.screens(@rules-xs, @rules-sm, @rules-md, @rules-lg) {
    .screen-xs-min(@rules-xs);
    .screen-sm-min(@rules-sm);
    .screen-md-min(@rules-md);
    .screen-lg-min(@rules-lg);
}