Conversion of SASS base--rem to px

remis a newly added unit value in CSS3, which, em like the unit, is a relative unit. The difference is that it is calculated relative to the parent element of the element, relative to the em font-size rem root element html font-size . This rem makes it possible to bypass complex hierarchical relationships and implement a em unit-like function.

Use of REM

It says that the em font size is set relative to its parent element, so there is a problem with any element setting, and it may be necessary to know the size of his parent element, which, when we use it many times, presents an unpredictable risk of errors. And it's relative to the root rem element , which means that we just need to determine a reference value in the root element, the reference value is set to how much, can be determined according to your own needs.

Suppose you use the browser's default font size 16px to see px rem the conversion relationship between some units and:

px	rem
12	12/16 = .75
14	14/16 = .875
16	16/16 = 1
18	18/16 = 1.125
20	20/16 = 1.25
24
30	30/16 = 1.875
36	36/16 = 2.25
42	42/16 = 2.625
48	48/16 = 3

If you want to set a different value, you need to define it in the root element, and in order to make it easier to calculate, you will often set the value in the element font-size 62.5% :

{ font-size: 62.5%/**/}

Equivalent to set in font-size 10px , the value shown in the example above will change:

Px	Rem
12	12/10 = 1.2
14
16	16/10 = 1.6
18
20	20/10 = 2.0
24	24/10 = 2.4
30	30/10 = 3.0
36	36/10 = 3.6
42	42/10 = 4.2
48	48/10 = 4.8

Because rem it is a property in CSS3, a lot of people first focus on the browser to his support, I truncated a caniuse to the rem properties of the compatibility table:

Can be clearly known, REM has been well supported in many browsers, if your project does not consider the low version of IE, you can rest assured that the use of, if your project in the low version of IE still occupy a lot of proportion, then you are still worried about the use of REM is not compatible and is not daring to use. In fact, it is not necessary to do some processing for the lower version of IE browser:

{ font-size: 62.5%;}  { font-size: 14px; font-size: 1.4rem/** * H1    { font-size: 24px; font-size: 2.4rem/** *

This solves the problem of incompatible with the low version of IE, but gives birth to another disadvantage, which is to increase the amount of code. Must have the fish and bear paw many times can not be both.

If you want to learn more about rem how to use it, it is recommended that you read:

• CSS3 REM Sets the font size--viaw3cplus
• FONT SIZING with Rem--viajonathan Snook
• There ' s more to the CSS rem unit than font sizing--viacss-tricks
• In Defense of Rem Units--viamatthew Lettini
• Font sizing with REM could be Avoided--viaharry
• Responsive 10th first day: use REM to set text size--via a trace

Why to userem

Like em units, the use of units in responsive design rem is very useful. Although they are relative units, rem units can be used to avoid many levels of relationships. Because em it is relative to his parent element font-size , rem It is relative to the root element . For example, if the size is set to not reset, no h1 font-size 1rem html font-size matter how big the parent element is set, h1 there will be no effect on it.

In SassremThe use

In CSS, implementations px and rem transformations are very simple, but each use needs to be computed. Although in the html setting font-size:62.5%; will bring convenience, but eventually some annoying, not long-term. Now that we have studied sass, we should think about how to get sass to help us with these calculations. Next, we'll show you how to use the SASS implementation px and rem calculation.

remIn@functionIn the use of

The sass can also be used as a em px conversion to rem . This process is also accomplished by Sass @function .

Depending on rem the principle of usage, you can know that px rem a turn needs to html set a value in the root element font-size , because rem it is relative to the html root element. To define a function to px go in Sass rem , first set a default variable:

$browser the value of the-DEFAULT-FONT-SIZE:16PX!default;//variable can be defined according to your needs

and the declaration that needs to be displayed in the html root element font-size :

$browser the value of the-DEFAULT-FONT-SIZE:16PX!default;//variable can be defined according to your needs

Then we @function can achieve px the rem calculation by:

@function pxTorem($px){//$px为需要转换的字号 @return $px / $browser-default-font-size * 1rem;}

Once defined @function , the actual use is much simpler:

{    font-size: $browser-default-font-size;}  {    font-size: pxtorem (12px);}  {  font-size: 16px;}  {  font-size: 0.75rem;}

However, the defined function pxTorem() px rem does not serve the calculation of multiple property values at the same time, although it implements the converted calculation:

{    font-size: pxtorem (12px);     margin: pxtorem (5px 10px); //Simultaneous calculation of multiple values will be an error }

If you use this, you will get an error when compiling:

/Users/airen/Sites/testSass/style.scss      error style.scss (Line 4: Undefined operation: "5px 10px/16px times 1rem".)

This means that if the style needs to set multiple property values at the same time, it pxTorem() becomes too restrictive, in other words, the function is only suitable for use on attributes with a single property value, for example font-size . If you want to use it forcibly, you can use more than one pxTorem() :

{    font-size: pxtorem (12px);     margin: pxtorem (5px) Pxtorem (10px) Pxtorem (15px);     Border: pxtorem (1px) solid #f36;}  {  font-size: 0.75rem;   Margin: 0.3125rem 0.625rem 0.9375rem;   Border: 0.0625rem solid #ff3366;}

In SassmixinRealizerem

In addition to using @function px the implementation transformation rem , you can also use the implementation of the sass in the mixin px rem .

font-sizeis one of the most common attributes in a style, let's take a look at a simple mixin , font-size go-to implementation px rem :

@mixin font-size ($target) {    font-size: $target;     font-size: ($target/$browser-default-font-size) * 1rem;}

In practice, it can be @include defined by invoking @mixin font-size :

{    @include font-size (12px);}  {  font-size: 12px;   Font-size: 0.75rem; }

In fact, this mixin is too weak to achieve the effect we need, because many of our style attributes don't have a single attribute. In order for multiple properties to be set to multiple values, it is necessary to mixin make a function extension:

@mixin Remcalc ($property, $values ...){$max:Length ($values);//Returns the length value of the $values list $pxValues:"';$remValues:"';@for $i from 1 through $max {$value:strip-units (Nth ($values, $i));//Returns the $i value in the $values list and removes the unit value $browser-default-font-size:strip-units ($browser-default-font-size);$pxValues:#{$pxValues + $value * $browser-default-font-size}px; @if $i < $max{$pxValues:#{$pxValues + ""}; }} @for $i from 1 through $max{$value:strip-units (Nth ($values, $i));$remValues:#{$remValues + $value}REM; @if $i < $max{$remValues:#{$remValues + ""}; }  }   #{$property}: $pxValues; #{$property}: $remValues;}

In this, remCalc() two parameters are defined $property and $values... . $propertyIt represents a style attribute and $values... represents one or more property values.

Note: The following custom functions are used in the definitions above remCalc strip-units , mainly for removing units, see Sass Basic--px to EM mixin and @function for a strip-units function definition method.

pxremonce the definition of a turn is mixin complete, you can @include refer to it by:

{    @include remcalc (width,45);    @include Remcalc (margin,1,.5,2,3);}  {  width: 720px;   Width: 45rem;   margin: 16px 8px 32px 48px;   margin: 1rem 0.5rem 2rem 3rem;}

It is important to take a value in the actual use of the value. remCalc() $values rem

Conversion of SASS base--rem to px