Automate pixel fallback using REM units throughout a project

问题

I checked the following article in which it presented the following mixing:

rem font size with pixel fallback

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

I feel very confortable using rem on my projects, after placing font-size: 62.5% on the html so 1rem = 10pixels.

But I would like to know if there is a mixing or a method to create a pixel fallback for any rem used in a whole project, as for example:

&:before{
    color: white;
    margin: 0 0.5rem 0 0;
    left: 0;
    text-align: center;
    top: 0;
    width: 3.2rem;
}

In this case the margin-right = 5pixels and width 32pixels. The issue with rem units is that IE8, Opera mini or Safari 3.2 is not supported. So the site would not be correctly visible from any of these browsers.

Is there a way to automate the pixel fallback using rem throughout a project?

回答1:

Here is a solution so you can use the rem to px mixin for any property:

html {
  font-size: 62.5%;
}

@function calculateRem($size) {
  $remSize: $size / 10px;
  @return #{$remSize}rem;
}

@mixin rem($propertie, $value) {
  #{$propertie}: $value;
  #{$propertie}: calculateRem($value);
}

p {
  font-size: calculateRem(32px);
  @include rem(width, 100px);
  @include rem(margin, 50px);
}

OUTPUT

html {
  font-size: 62.5%;
}

p {
  font-size: 3.2rem;
  width: 100px; /* Fallback */
  width: 10rem;
  margin: 50px; /* FallBack */
  margin: 5rem;
}

An example: http://sassmeister.com/gist/e888e641925002b5895c

来源：https://stackoverflow.com/questions/24013848/automate-pixel-fallback-using-rem-units-throughout-a-project

标签

css3

Sass

pixels

mixing