Simple process of using rem

app.css

$setMediaWidth: 750;
@import '../base.scss';
@import '../place.scss';


.icon-comment {
    width: rc(60);   //举例使用rc(传入值)
    height: rc(60);
    font-size: rc(28);
    color: #51576f;
    display: flex;
    align-items: center;
    justify-content: center;
}

base.scss

---

//====================================================
//
//  reset
//
//====================================================

$reset: false    !default;    // 是否重置默认样式
@if $reset {
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, header, hgroup, nav, section, article, aside, footer, figure, figcaption, menu, button { margin: 0; padding: 0 }
    body { font-family:"microsoft yahei", "Helvetica Neue", Helvetica, STHeiTi, sans-serif; line-height: 1.5; font-size: 16px; color: #000; background-color: #fff; -webkit-user-select: none; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
    h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400 }
    table { border-collapse: collapse; border-spacing: 0 }
    caption, th { text-align: left }
    fieldset, img { border: 0 }
    li { list-style: none }
    ins { text-decoration: none }
    del { text-decoration: line-through }
    input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: 0 }
    button { -webkit-appearance: none; border: 0; background: 0 0 }
    a { -webkit-touch-callout: none; text-decoration: none }
    em, i { font-style: normal }
    :focus { outline: 0; -webkit-tap-highlight-color: transparent }
    *,*:after,*:before{ -webkit-box-sizing: border-box; box-sizing: border-box; }
}

//====================================================
//
//  px2rem
//
//====================================================

@import 'rem-calc';

//====================================================
//
//  set html font-size
//
//====================================================

$set-html-font-size: true     !default; // 是否开启设置html字体
$rem-base: 16                 !default; // 设置rem单位计算基数
$setMediaWidth: 750           !default; // 设置适配宽度
$mediaArrays:(320 360 375 400 414 480 540 640 720 800 960 1125) !default;
@if $set-html-font-size {
    $htmlSize: null;
    @if length($mediaArrays)==1 and type-of($mediaArrays) !=string {
        $htmlSize: $rem-base / ($setMediaWidth / nth($mediaArrays, 1));
        @media screen and (min-width: #{nth($mediaArrays, 1)}) {
            html {
                font-size: #{$htmlSize};
            }
        }
    }
    @if length($mediaArrays)>1 {
        @for $i from 1 through length($mediaArrays) {
            $htmlSize: $rem-base / ($setMediaWidth / nth($mediaArrays, $i));
            $media: null;
            @if $i==1 {
                $media: "screen and (max-width: #{nth($mediaArrays, $i + 1) - 1}px)";
            }
            @else if $i==length($mediaArrays) {
                $media: "screen and (min-width: #{nth($mediaArrays, $i)}px)";
            }
            @else {
                $media: "screen and (min-width: #{nth($mediaArrays, $i)}px) and (max-width: #{nth($mediaArrays, $i + 1) - 1}px)";
            }
            @media #{$media} {
                html {
                    font-size: #{$htmlSize};
                }
            }
        }
    }
}

//====================================================
//
//  mixins
//
//====================================================

$version: '?v=' + random() * 100000000000000000 !default;
$img_url: '/public/dist/images' !default;

@mixin image($url){
  background-image:url( unquote($img_url + '/'+ $url ) );
}

@mixin placeholder($color){
    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        color: $color;
    }
    ::-moz-placeholder {     /* Firefox 19+ */
        color: $color;
    }
    :-ms-input-placeholder { /* IE 10+ */
        color: $color;
    }
    :-moz-placeholder {      /* Firefox 18- */
        color: $color;
    }
}

$pre:ms moz webkit !default;
@mixin prefixs($map, $vendors: $pre) {
    @each $prop, $value in $map {
        @if $vendors {
           @each $vendor in $vendors {
              #{"-" + $vendor + "-" + $prop}: #{$value};
           }
        }
        #{$prop}: #{$value};
    }
}

@mixin size($width, $height: $width, $lineHeight: 0px) {
    width: $width;
    height: $height;
    @if $lineHeight != 0px{
        line-height: $lineHeight;
    }
}

//use: @include position(absolute,top 5 right 6);
@mixin position($position,$args) {
    $offsets: top right bottom left z-index;
    position: $position;
    @each $o in $offsets {
        $i: index($args, $o);
        @if $i and $i + 1 <= length($args) and type-of( nth($args, $i + 1) ) == number  {
            #{$o}:nth($args, $i + 1);
        }
    }
}
@mixin absolute($args) {
    @include position(absolute, $args);
}
@mixin fixed($args) {
    @include position(fixed, $args);
}
@mixin relative($args) {
    @include position(relative, $args);
}

@mixin opacity($color, $trans) {
    background: $color;
    filter: alpha(opacity=$trans * 100);
    opacity: $trans;
}

@mixin filter($color, $trans) {
    $rgba: rgba($color, $trans);
    background: $rgba;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr="#{ie-hex-str($rgba)}", EndColorStr="#{ie-hex-str($rgba)}");
    :root & {
        filter: none;
    }
}
//引用placeholder selector
@import 'place.scss';

---

place.scss

/* 作为继承的模板使用 */
%fl {
    float: left;
}

%fr {
    float: right;
}

%fn {
    float: none;
}

%cf {
    *zoom: 1;
    &:after {
        content: '';
        display: table;
        clear: both;
    }
}

%dn {
    display: none;
}

%db {
    display: block;
}

%dib {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

%tl {
    text-align: left;
}

%tr {
    text-align: right;
}

%tc {
    text-align: center;
}

%ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    max-width: 100%;
}

%border-box {
    -moz-box-sizing: border-box;
    -webkt-box-sizing: border-box;
    box-sizing: border-box;
}

%arrow {
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    display: inline-block;
}

%relative {
    position: relative;
}

%absolute {
    position: absolute;
}

%ovh {
    overflow: hidden;
}

%flexbox {
    display: -webkit-box; // OLD - iOS 6-, Safari 3.1-6
    display: -moz-box; // OLD - Firefox 19- (buggy but mostly works)
    display: -ms-flexbox; // TWEENER - IE 10
    display: -webkit-flex; // NEW - Chrome
    display: flex;
}

%select{
    -ms-user-select: text;
    -moz-user-select: text;
    -webkit-user-select: text;
    user-select: text;
}

---

rem-calc.scss

// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

// This is the default html and body font-size for the base rem value.
$rem-base: 16px !default;
$rem-digits:2   !default;

// IMPORT ONCE
// We use this to prevent styles from being loaded multiple times for compenents that rely on other components. 
$modules: () !default;
@mixin exports($name) {
  @if (index($modules, $name) == false) {
    $modules: append($modules, $name);
    @content;
  }
}

//
// @functions
//

@function pow($x, $n) {
  $ret: 1;
    
  @if $n >= 0 {
    @for $i from 1 through $n {
      $ret: $ret * $x;
    } 
  } @else {
    @for $i from $n to 0 {
      $ret: $ret / $x;
    }
  }
  
  @return $ret;
}


@function to-fixed($float, $digits: 2) {  
  $sass-precision: 5;

  @if $digits > $sass-precision {
    @warn "Sass sets default precision to #{$sass-precision} digits, and there is no way to change that for now."
    + "The returned number will have #{$sass-precision} digits, even if you asked for `#{$digits}`."
    + "See https://github.com/sass/sass/issues/1122 for further informations.";
  }
  
  $pow: pow(10, $digits);
  @return round($float * $pow) / $pow;
}

@function toFixed($args...){
    @return to-fixed($args...);
}



// RANGES
// We use these functions to define ranges for various things, like media queries. 
@function lower-bound($range){
  @if length($range) <= 0 {
    @return 0;
  }
  @return nth($range,1);
}

@function upper-bound($range) {
  @if length($range) < 2 {
    @return 999999999999;
  }
  @return nth($range, 2);
}

// STRIP UNIT
// It strips the unit of measure and returns it
@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

// CONVERT TO REM
@function convert-to-rem($value, $base-digits: $rem-digits)  {
  $value: strip-unit($value) / strip-unit($rem-base) * 1rem;
  @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
  @return toFixed($value,$base-digits);
}

@function data($attr) {
  @if $namespace {
    @return '[data-' + $namespace + '-' + $attr + ']';
  }

  @return '[data-' + $attr + ']';
}

// REM CALC 

// New Syntax, allows to optionally calculate on a different base value to counter compounding effect of rem's.
// Call with 1, 2, 3 or 4 parameters, 'px' is not required but supported:
// 
//   rem-calc(10 20 30px 40);
// 
// Space delimited, if you want to delimit using comma's, wrap it in another pair of brackets
// 
//   rem-calc((10, 20, 30, 40px));
// 
// Optionally call with a different base (eg: 8px) to calculate rem.
// 
//   rem-calc(16px 32px 48px, 8px);
// 
// If you require to comma separate your list
// 
//   rem-calc((16px, 32px, 48), 8px);

@function rem-calc($values, $base-digits: $rem-digits) {
  $max: length($values);

  @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-digits); }

  $remValues: ();
  @for $i from 1 through $max {
    $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-digits));
  }
  @return $remValues;
}

// OLD EM CALC
// Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
@function emCalc($values){
  @return rem-calc($values);
}

// OLD EM CALC
// Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
@function em-calc($values){
  @return rem-calc($values);
}


// eg....
@function rc($values...){
 @return rem-calc($values...);
}