Posted By

FrederickWeiss on 03/23/14


Tagged

SASS mixin


Versions (?)

Font Size rem's with a px fallback


 / Published in: CSS
 

  1. This mixin sets the font size in rem's with a px fallback.
  2. ///////////////////////////////////////////////////////////////
  3.  
  4. @mixin font-size($sizeValue: 12 ){
  5. font-size: $sizeValue + px; //fallback for old browsers
  6. font-size: (0.125 * $sizeValue) + rem;
  7. }
  8.  
  9.  
  10.  
  11.  
  12. Usage:
  13. ///////////////////////////////////////////////////////////////
  14.  
  15. body {
  16. @include font-size(16);
  17. }
  18.  
  19.  
  20.  
  21.  
  22. Output:
  23. ///////////////////////////////////////////////////////////////
  24.  
  25. body {
  26. font-size: 16px;
  27. font-size: 2rem;
  28. }

Report this snippet  

You need to login to post a comment.