Last active
June 7, 2016 09:07
-
-
Save DimitryDushkin/fc365d12d7999314b40e498b3d8a22f0 to your computer and use it in GitHub Desktop.
Example of basic mixins for Stylus to make typography on site responsive
This file contains 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
| $default-font-size = 16px | |
| mobile() | |
| @media (max-width: 800px) | |
| {block} | |
| small-mobile() | |
| @media (max-width: 450px) | |
| {block} | |
| // Outputs size in rems and fallback to px | |
| font-size-rem(size) | |
| font-size size px | |
| font-size (size / $default-font-size) rem | |
| body, html | |
| font-size $default-font-size | |
| +mobile() | |
| font-size 14px | |
| +small-mobile() | |
| font-size 13px | |
| // Example usage | |
| h1 | |
| font-size-rem(48px) | |
| // outputs | |
| // h1 { | |
| // font-size 48px | |
| // font-size 3rem | |
| // } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment