REM to PX Browser Function with Sass

Discussion

1. Julien Jolly

   I know some sass trick to use REM with Sass but this one is certainly the simplest to use!

   This one is also interesting because it accepts either px or rem as an input value (great when you work from a photoshop file):
   http://hugogiraudel.com/2013/03/18/ultimate-rem-mixin/
• Axinté

  Exactly, and the Hugo’s article helps me to write the article.

  The approach is slightly different, you can also mix both values ‘px’ or ‘rem’ but ‘px’ aren’t converted for the standards browsers stylesheet. (intentionally wanted)
2. Tho Vo

   Nice article! Really helpful!
   I think it would be better if we just keep what properties need to convert from rem to px, like margin,padding and font-size in main-ie.css but the other like font-family or background-color for example can still keep in the main.css. It may help reduce the size of main-ie.css :)
   And Axinté, do you test it with other properties like background-size, background-position and multiple background…
• Sébastien Axinté

  Thanks Tho !

  You can do this yes, but the main goal will change and it’s not optimal. You’ll need three css:
  – one css with your common properties without units. (font-family, backgrounds..)
  – one css with properties in rem units for standards browsers.
  – one css with properties in px units for IE8- browsers.

  This force the browser to make one more HTTP request. And the final CSS weight remain the same, but splitted in 2 files.

  I didn’t tested all css properties but the logic is the same, for multiples background position you can do the following:

  background-position: u(1rem 2rem), u(3rem 4rem);
  
3. Karl Merkli

   Looks like my Sass Library Frost–Fallback
4. Tho Vo

   Hi Sébastien,

   My idea is we just load two files
   1. main.css with full of properties and rem unit
   2. main-ie.css for IE8 with px unit for only properties need it, I mean we still keep all properties like font-family,background-color for example in main.css(as we know we must load main.css for sure) and in main-ie.css(width conditional comment we load only when user browser is IE8) keep only properties need to change from rem to px, so the main-ie.css will be a bit smaller than main.css

   And I will try this for background-position in my next project,I hope I can notify you any problem :)
• Sébastien Axinté

  Yes I understood, but IE8- will download two CSS files :) And the whole stylesheets weight for IE8- will be main.css + main-ie.css.

  Like I said in the article, with the Nicolas Gallagher conditional comments, you can avoid this:
  – one css for ie. (full properties and px units)
  – one css for standards browsers. (full properties and rem units)

  It’s better than a fallback. Notify me of any problems you’ll find ! :)
5. Larry Botha

   This is great!

   I’ve written a px and rem mixin which required you include the property as a parameter:

   https://gist.github.com/larrybotha/4153104

   I didn’t consider that using a function instead would clean up the CSS, though.

   This is an awesome utility, thanks Sébastien.
• Sébastien Axinté

  Thanks man !
6. Arthur Gouveia

   Hello, Sébastien!

   Thanks for that. It is pure gold and shall improve a lot of people’s CSS and also accessibility as a whole.

   I’ve been using a similar technique for a while now, but was not generating two CSS, like your approach. Also, I was using @include rem(margin, 0, 20, 30, 40) as a syntax, which was not helping on my speed so this is a huge improvement. Again: thanks!

   One thing, tho: I thought you could still improve it a bit by supporting a call to the function like this:

   margin: u(0px auto 10px);
   

   So, basically, before the conversion for $unit and $val variables you could try testing for ‘auto’ as a value, as such:

   @if $value == 'auto' {
       $list: append($list, $value);
   }
   
   @else {
       /* Your code goes here */
   }
   

   Hope it helps :)
• Sébastien Axinté

  Thank you for your comment, I really appreciate. I had not thought about this improvement, that’s a good idea :)
7. Daniel Furze

   I’ve integrated this into my workflow now – as I already have to serve a LT IE9 stylesheet in this particular project, I see no cons!

   Thanks very much for this post Sébastien :)
• David Walsh

  Awesome, glad to see it’s working for you! :D
8. Kevin Jannis

   Why not use: https://github.com/chuckcarpenter/REM-unit-polyfill ?
• frayde

  Using JavaScript to “polyfill” is the last solution to use in my experience. We’re talking to use a css preprocessor to produce an ie8 dedicated css and a conditonnal comment to load it only in the concern browser.

  So there are a lot of possibilities to polyfill IE8 lack of rem unit support, but using css to polyfill css only in the right place and affecting only the guilty browser seems to be a wiser choice for your visitors.

  Bye.
9. Ariel

   Hey! thanks for this! the only problem I encountered is that if you put 0 as a value on your property, it gets ignored.

   Like this:

   .class {
       margin: 2rem 5rem 0;
   }
   

   Gets converted to:

   .class {
       margin: 2rem 5rem;
   }
   

   or on pixels:

   .class {
       margin: 32px 80px;
   }
   

   Do you know a fix for this?

   Thanks!
• Ariel

  Nevermind, I just added this line to the one added by Arthur Gouveia and it worked:

  @if $value == 0 or $value == 'auto' {
         $list: append($list, $value);
  }
  

  Now the only thing that doesn’t work is the border shorthand property for example. Anyone knows a workaround for that?
• Ariel

  I guess I’ll be commenting myself over and over :P

  This fixes the shorthand problem. Ultimately you would use this:

  @if $value == 0 or type-of($value) != "number" {
         $list: append($list, $value);
  }
  

  This lets you use shorthand or non numerical characters and works perfectly!
• Goran

  Hi guys, thank you so much. I’ve tryed your code and it works great.

  I add Ariel fix:

  @if $value == 0 or type-of($value) != "number" {
                  $list: append($list, $value);
              }

  BUT when I try to set:

  margin:u(2rem auto);

  I get error:

  Syntax error: $number: "auto" is not a number for `unit'
  

  Thanks
• Goran

  Sorry for posting again, but I also tryed to add:

  $value == 'auto'

  no help.

  So, to make clear, with Ariel fix:
• Sébastien Axinté

  Hi Alex,

  Thanks for your comments and your self-reply, I appreciate that :)

  At first glance, I guess you passed the property directly within the u() function and it wasn’t designed for it (only numbers by default).

  But your improvements are smart and useful, thanks for it !
• Matt

  Hey Ariel & sebastien

  I am trying to add the following into the mixin.

  @if $value == 0 or type-of($value) != "number" {
        	$list: append($list, $value);
  			}
  

  Where do I put it? I keep getting errors when it compiles it?

  cheers
• Tom

  Sebastien – thanks a million this is the neatest solution to this problem I’ve come across by a mile. Can even use autoprefixer to only target ie fixes to the ie css now!

  Ariel – thanks for your addition, Sebastien – you should add this into your main article, I came here to add the same suggestion myself.

  Only thing I have to add is that “type-of” should be “type_of”.

  Matt – you just need to add this to functions.scss as the first condition (before the first “@if”, and change that to a “@else if”)
10. Jens Grochtdreis

    As there is Opera Mini who doesn’t understand rem, too (http://caniuse.com/#search=rem), I tend to use rem besides px inside one CSS.

    And do you really use rem with padding and margin? I concentrate it on font-size. But I will test margin and padding in my next project.
11. Sébastien Axinté

    Hi Jens,

    It depends on the specific case, I could use “em” instead of “rem” sometimes, maybe when I need margins or paddings linked to my element font-size. If not, I will use “rem” instead.

    For browsers that doesn’t support rem, you can use a Polyfill. (I didn’t tested it yet.)
12. CharlesBiggs

    This is real nice. Just a great way to remove pixel clutter and verbosity. Added it to my toolbox and integrated in my workflow.

    Big up :-]
13. Tracy Stone

    Thanks, this is excellent! I integrated it into my latest project; works great.
• Tracy Stone

  In a few cases I wanted the function to convert px to rem, so I used the following:

  @else if($unit == 'px'){
      $list: append($list, ($val / $pixelBase) + rem );
  }
  
14. Paul McElligott

    If I use the conditionals like you have it there, Chrome doesn’t load the default CSS. I’m using word press and this trick to wrap the style sheet commands in the conditional statements.

    http://code.garyjones.co.uk/ie-conditional-style-sheets-wordpress

    If I just use the second one –

    [if (lt IE 9) & (!IEMobile)]

    , it seems to work.
15. Chris Eppstein

    Sass arithmetic is dimensional, so you don’t need to do all these backflips to strip off units and parse strings. You just need to do the math correctly. Basically the units cancel like x’s and y’s did in algebra.

    So:

    $px-value: $rem-value * 16px / 1rem; // 2rem => 32px
    

    Here’s how I coded up the rem-fallback concept the other day. It uses some more advanced Sass features available in Sass 3.3: https://gist.github.com/chriseppstein/1241eee7fa6ccae7ec0c
16. Rebecca Cox

    This seems to work (to allow for auto or 0 within the input)

    @function u($values){ 
    
          $list: (); 
    
          @each $value in $values { 
    			
    	@if $value != 0 and type_of($value) == "number" {
    		$unit : unit($value);
    		$val  : parseInt($value); 
    		
                    @if ($px-only) and ($unit == 'rem') { 
                          $list: append($list, ($val * $pixelBase) + px); 
    		      }
    		@else {
    		      $list: append($list, $value);
    		      }
    	}
    	@else {
    	      $list: append($list, $value);
    	      }
          }
          @return $list(); 
    }
    
• Sébastien Axinté

  Yes, this fix works and I tried it at work on a production environnement. This is the same fix that Ariel and Arthur Gouveia found, but your code should work as well :)
17. Matt Oettinger

    Love this solution but am wondering – how would I change the $pixelBase based on media queries?
18. Matt Oettinger

    Answering my own question. I don’t think I’d need to change the $pixelBase but instead would change the font-size tied to the base html element depending on media queries.
19. Sebastien Axinte

    Yep, the $pixelBase variable shouldn’t be changed because we multiply this number with the REM value in order to get the right pixels value, and 1rem = 16px by default in browsers.