DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > REM Sass Mixin With Pixel Fallback

REM Sass Mixin With Pixel Fallback

Paul Underwood user avatar by
Paul Underwood
·
Nov. 04, 14 · Web Dev Zone · Interview
Like (0)
Save
Tweet
3.34K Views

Join the DZone community and get the full member experience.

Join For Free

The REM CSS unit is similar to the EM CSS unit except it allows you to size elements relative to the root of the HTML tag, as it stands for Root EM. The EM unit is relative to the font-size of the parent, which can cause problems in working out the correct size to use in descendent elements.

Because the REM is relative to the root we can set the default font-size in the HTML tag which allows us to easily define the size of the other elements.

Defining the html font-size as 62.5% allows us to defines REMs similar to pixels.

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

The REM CSS unit is widely supported on most modern browsers but it's not supported in IE8 and lower browsers, for unit values to work in both modern browsers and IE8 we will need to duplicate the property in the CSS.

html 
{ 
    font-size: 62.5%; 
} 

body 
{ 
    font-size: 1.4rem;
    font-size: 14px;
}

h1   
{ 
    font-size: 2.4rem;
    font-size: 24px;
}

Instead of repeating ourself everywhere in the CSS we can use a Sass Mixin for our REM property and pixel fallback.

@mixin rem2px($property, $sizeValue: 1.6) {
  #{$property}: ($sizeValue * 10) + px;
  #{$property}: $sizeValue + rem;
}

Now we can use this in our Sass to output the same as above with the following code.

body 
{ 
    @include rem2px(font-size, 1.4);
}

h1   
{ 
    @include rem2px(font-size, 2.4);
}

This @mixin can work well for single value elements like font-size but it's not going to help when you need to have multiple values in properties like margins or padding.

The following @mixin was found on Hugo Giraudel post which allows you to handle properties with multiple values.

html {
  font-size: 62.5%; /* 1 */
}

@function parseInt($n) { /* 2 */
  @return $n / ($n * 0 + 1);
}

@mixin rem($property, $values) {
  $px : (); /* 3 */
  $rem: (); /* 3 */
  
  @each $value in $values { /* 4 */
   
    @if $value == 0 or $value == auto { /* 5 */
      $px : append($px , $value);
      $rem: append($rem, $value);
    }
    
    @else { 
      $unit: unit($value);    /* 6 */
      $val: parseInt($value); /* 6 */
      
      @if $unit == "px" {  /* 7 */
        $px : append($px,  $value);
        $rem: append($rem, ($val / 10 + rem));
      }
      
      @if $unit == "rem" { /* 7 */
        $px : append($px,  ($val * 10 + px));
        $rem: append($rem, $value);
      }
    }
  }
  
  @if $px == $rem {     /* 8 */
    #{$property}: $px;  /* 9 */
  } @else {
    #{$property}: $px;  /* 9 */
    #{$property}: $rem; /* 9 */
  }
}

Sass (stylesheet language)

Published at DZone with permission of Paul Underwood, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Why Great Money Doesn’t Retain Great Devs w/ Stack Overflow, DataStax & Reprise
  • The 5 Healthcare AI Trends Technologists Need to Know
  • 10 Books Every Senior Engineer Should Read
  • 6 Best Books to Learn Multithreading and Concurrency in Java

Comments

Web Dev Partner Resources

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo