CSS px Auto turn REM

As a front-end development, especially when doing mobile adaptation, REM is the unit we often use, its benefits we can search by themselves, there are many online.
But when we convert the PX on the design to REM, it's a time-consuming and laborious process, is there any way to "liberate" us? (Forgive me for being lazy ~)

1.CSS processor

Processors such as Sass, less, and postcss can be processed.

Sass (implemented using Sass functions, mixed macros):

@function px2em ($px, $base-font-size:16px) {  @if (unitless ($px)) {    @warn "assuming #{$px} to bes in pixels, attemp Ting to convert it into pixels for you ";    @return Px2em ($px + 0px); That may fail.  } @else if (unit ($px) = = em) {    @return $px;  }  @return ($px/$base-font-size) * 1EM;}

Sass (mixed macro with Sass):

@mixin Px2rem ($property, $px-values, $baseline-px:16px, $support-for-ie:false) {  //conver the baseline into Rems  $baseline-rem: $baseline-px/1rem * 1;  Print the first line in pixel values  @if $support-for-ie {    #{$property}: $px-values;  }  If there is only one (numeric) value, return to the Property/value line for it.  @if type-of ($px-values) = = "Number" {    #{$property}: $px-values/$baseline-rem;  }  @else {    //create an empty list, we can dump values into    $rem-values: ();    @each $value in $px-values{      //If The value was zero or not a number, return it      @if $value = = 0 or type-of ($value )! = "Number" {        $rem-values:append ($rem-values, $value/$baseline-rem);}    }    Return the property and its list of converted values    #{$property}: $rem-values;  }}

The above method, we also have to go to the additional learning sass This kind of writing rules, also need to configure, although very simple, but can be simpler is easier?

2.CSSREM

This is a plug-in is Flashlizi for sublime text written a plug-in, it is really convenient to use! We can see it on GitHub.

Let me explain how to configure:

2.1 We can download the dependent files on GitHub;

2.2 Open Sublime text, enter the Packages directory (Sublime, Preferences, and Browse Packages);

2.3 Put the Cssrem-master folder in the directory opened in the previous step, restart sublime text to take effect;

We can also modify the default configuration: Open the Cssrem.sublime-settings file under the Cssrem-master folder to modify {    "Px_to_rem": the unit ratio of//PX to REM, the default is    " Max_rem_fraction_length ": 6,//px to the maximum length of the number of parts of REM. The default is 6.    "Available_file_types": [". css", ". Less", ". Sass", ". html"]    //enable this plug-in file type. The default is: [". css", ". Less", ". Sass"]}

Actual test:
Create a new. css file:

11.png

Press the TAB key to get the following result:

22.png

is not very convenient, quick to try it ~

Finally, attach a micro-website-use Flexible.js to implement mobile device adaptation.