Skip to content

Instantly share code, notes, and snippets.

@juanbrujo

juanbrujo/less-mediaqueries-mixin.less

Last active October 19, 2019 17:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save juanbrujo/bb3a8897b12773496d72 to your computer and use it in GitHub Desktop.
Save juanbrujo/bb3a8897b12773496d72 to your computer and use it in GitHub Desktop.
Download ZIP
LESS mediaqueries mixin
Raw
less-mediaqueries-mixin.less
// Declare your mediaqueries breakpoints
@mobile: ~"only screen and (max-width: 529px)";
@tablet: ~"only screen and (min-width: 530px) and (max-width: 949px)";
@desktop: ~"only screen and (min-width: 950px) and (max-width: 1128px)";
@desktop-xl: ~"only screen and (min-width: 1129px)";
// Use them easily in your CSS declaration:
element {
property: value;
@media @tablet {
property: tablet-value;
}
@media @desktop {
property: desktop-value
}
}
@loucyx
Copy link

loucyx commented Jun 18, 2014

Pretty neat!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment