Posted By

FrederickWeiss on 03/23/14


Tagged

SASS mixin


Versions (?)

Line Height rem's with a px fallback.


 / Published in: CSS
 

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

Report this snippet  

You need to login to post a comment.