Responsive breakpoints using LESS variables

breakpoints.less

///////////////////////////////////////////////////////////////////////////////
// RESPONSIVE BREAKPOINTS

@xs: 640px;
@xs_plus_one: (@xs + 1px);
@sm: 768px;
@sm_plus_one: (@sm + 1px);
@md: 992px;
@md_plus_one: (@md + 1px);
@lg: 1200px;
@lg_plus_one: (@lg + 1px);
 
// main breakpoints
@to_xs: ~"(max-width: @{xs})";
@from_xs: ~"(min-width: @{xs_plus_one})";
@to_sm: ~"(max-width: @{sm})";
@from_sm: ~"(min-width: @{sm_plus_one})";
@to_md: ~"(max-width: @{md})";
@from_md: ~"(min-width: @{md_plus_one})";
@to_lg: ~"(max-width: @{lg})";
@from_lg: ~"(min-width: @{lg_plus_one})";

// ranges
@from_xs_to_sm: ~"@{from_xs} and @{to_sm}";
@from_xs_to_md: ~"@{from_xs} and @{to_md}";
@from_xs_to_lg: ~"@{from_xs} and @{to_lg}";
@from_sm_to_md: ~"@{from_sm} and @{to_md}";
@from_sm_to_lg: ~"@{from_sm} and @{to_lg}";
@from_md_to_lg: ~"@{from_md} and @{to_lg}";

Thank you! Bro!