一 sass安装

• 直接安装的方法在cmd中：

• 在main.js中出现一下代码

• 安装两个文件：

    npm i sass-loader -g
    npm i node-sass -g (如果安装的时候耐性等待，如果安装不成功再安装一遍)
    在package.json中能看到 sass-loader和node-sass的版本号即可
  

• 起变量名使用$k:value
  

• 在style中加上lang="scss"

• 使用变量

   body {
     background-color: $bgcolor;
     color: $textcolor;
     font-size: $fontsize;
   }
  

• 变量的加减乘除 和嵌套 都是可以的

   <template>
        <div id="app">
          <div class="box">
            <h1>欢迎使用less</h1>
          </div>
          <div class="box1">
            <div class="box2">
              <div class="box3"></div>
            </div>
          </div>
          <ul>
            <li v-for="(v, i) in 4" :key="i">{{ v }}</li>
          </ul>
        </div>
   </template>
   <style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  /* 特点：可以使用变量 可以嵌套 图片路径也可以使用变量*/
  $colorRed: red;
  $colorGreen: green;
  $colorBlue: blue;
  $k: 100px;
  
  ul {
    width: $k;
    height: $k;
    background: $colorRed;
  
    li:nth-of-type(1) {
      /* 写减法的时候左右要加空格，否则会理解为杠- */
      width: $k - 20px;
      background: $colorGreen;
    }
    li:nth-of-type(2) {
      width: $k + 20px;
      background: $colorBlue;
    }
  }
  
  .box1 {
    width: $k * 2;
    height: $k * 2;
    background: $colorRed;
    .box2 {
      width: $k;
      height: $k;
      background: $colorGreen;
      .box3 {
       // 使用移动端的时候除号 需要使用calc（）包起来
        width: calc($k/2);
        height: calc($k/2);
        background: $colorBlue;
      }
    }
  }
  .box {
    width: 200px;
    height: 200px;
    border: 1px solid $colorRed;
    background: url('./assets/logo.png')no-repeat;
  
    h1 {
      color: $colorRed;
    }
  }
  </style>
  

• 和less区别：less使用的使用除号直接@k/ 但是sass 需要使用calc（）包起来 width: calc($k/2);

• 另外 sass 不能定义函数 sass里面的背景图片 直接写

二 移动端rem安装

• 1.下载npm依赖

npm install postcss-pxtorem --save-dev
npm i -S amfe-flexible

• 2.在根目录修改postcss.config.js文件配置（如果没有自己需要在根目录下新建postcss.config.js）

 

转换vant，设置rootValue:37.5

module.exports = {
    plugins: {
        autoprefixer: {
            overrideBrowserslist: ['Android >= 4.0', 'iOS >= 8'],
        },
        // px转换成rem
        'postcss-pxtorem': {
            // vant-UI的官方根字体大小是37.5
            rootValue: 37.5,
            propList: ['*'],
        },
    },
};

不转换vant

module.exports = {
    plugins: {
        autoprefixer: {
            overrideBrowserslist: ['Android >= 4.0', 'iOS >= 8'],
        },
        // px转换成rem
        'postcss-pxtorem': {
            // 设计图页面尺寸如果是750就填75,是640就填入64
            rootValue: 75,
            propList: ['*'],
            // vant不转化 vant-UI的官方根字体大小是37.5
            selectorBlackList:['van']  
        },
    },
};

• 3.在main.js引入需要计算rem的libflexible文件

  import "amfe-flexible";

• 4.重启服务

• 5.布局按照设计图px布局 然后就会自动计算rem的值

.test-box {
  width: 375px; // 会自动转化为10rem 铺满整个屏幕
  height: 500px;
  font-size: 32px;
  background: red;
}

出入：www.cnblogs.com/miangao/p/1…

案例：