Last active
October 6, 2017 05:42
-
-
Save vitordino/59107744eebb7bdf61ae71ab89b14c88 to your computer and use it in GitHub Desktop.
[stylus] breakpoints smixin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // --------------------- | |
| // breakpoints mixin | |
| // --------------------- | |
| // define breakpoints (you can modify or rename them, or create as many as you like) | |
| breakpoints = { | |
| xs: 0, | |
| sm: 480px, | |
| md: 768px, | |
| lg: 992px, | |
| xg: 1270px, | |
| } | |
| // create mixins by applying the breakpoints above | |
| above(breakpoint) | |
| if breakpoints[breakpoint] > 0 | |
| @media only screen and (min-width: breakpoints[breakpoint]) | |
| {block} | |
| else | |
| {block} | |
| below(breakpoint) | |
| @media only screen and (max-width: (breakpoints[breakpoint] - 1px)) | |
| if block | |
| {block} | |
| between(breakpoint_1, breakpoint_2) | |
| @media only screen and (min-width: breakpoints[breakpoint_1]) and (max-width: (breakpoints[breakpoint_2] - 1px)) | |
| if block | |
| {block} | |
| ////////////////////////////////////// | |
| // _ _ // | |
| // | | | | // | |
| // | | ___ _ _ __ ___| |_ // | |
| // | |/ / | | | '_ \/ __| __| // | |
| // | <| |_| | | | \__ \ |_ // | |
| // |_|\_\\__,_|_| |_|___/\__| // | |
| // // | |
| // - - - - - - - - - - - - - // | |
| // kunstdesign.com.br // | |
| // 2017 ® leonardo dino // | |
| // - - - - - - - - - - - - - // | |
| // // | |
| ////////////////////////////////////// | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // --------------------- | |
| // usage | |
| // --------------------- | |
| .selector | |
| font-size: 16px | |
| +above(md) | |
| font-size: 20px | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment