Setting Up The Less Variables
@desktop-min-width: 1024px; @phone-max-width: 768px; @desktop: ~"only screen and (min-width: @{desktop-min-width})"; @tablet: ~"only screen and (min-width: @{phone-max-width}) and (max-width: @{desktop-min-width}"; @phone: ~"only screen and (max-width: @{phone-max-width})";
Using The Less Variables
body { display: relative; @media @phone { background-color: deeppink; } @media @tablet, @desktop { background-color: #0000FF; } }