微信小程序学习笔记——样式 WXSS 【尺寸单位，样式导入，使用less或sass】

 

目录

 

1.尺寸单位

 2.样式导入

3.选择器

4.小程序中使用less  （sass也是一样的）

---

 

1.尺寸单位

rpx(responsive pixel):可以根据屏幕宽度进行自适应，规定屏幕宽韦750rpx。如在iphone6上，屏幕宽度为375px,共有750个物理像素，则750rpx = 375px = 750物理像素， 1rpx = 0.5px =1物理像素。

需求如下 

 

/* pages/stylePage/stylePage.wxss */
/*
1.小程序中 不需要主动来引入样式文件
2.需要把页面中某些元素的单位 由 px 改为 rpx
    1.设计稿 750px
      750px = 750rpx
      1px = 1rpx
    2.把屏幕宽度改成375px
      375px = 750 rpx
      1px = 2 rpx
      1rpx = 0.5px
3.存在一个设计稿 宽度414 或者 位置 page（当设计稿不符合750px的要求的时候，需要前端自己算rpx）
     1.设计稿 page 存在一个元素 宽度 100px
     2.拿以上的需求 去实现 不同宽度的页面适配

     page px = 750 rpx
     1px = 750rpx / page
     100px = 750rpx / page * 100
4 利用一个属性 calc属性， css和wxss 都支持这个属性（当设计稿不符合750px的要求的时候，需要前端自己算rpx）
      运算符之间加空格
*/
view{
  /* width: 200rpx; */
  height: 200rpx;
  font-size: 40rpx;
  background: aqua;
  width:calc(750rpx / 375 * 100)
}

 

 2.样式导入

wxss中直接就支持，样式导入功能

也可以和less中的导入混用

使用@import语句可以导入外联样式表，支持相对路径。

 

3.选择器

小程序除了不支持通配符 *  之外，其他都和css一样

 

4.小程序中使用less  （sass也是一样的）

原生小程序不支持less,其他基于小程序的框架大体都支持，如wepy,mpvue,taro.但是仅仅因为一个less功能，而去引入一个框架，肯定是不可取的，因此可以用以下方式来实现

step1:vscode编辑器

step2:在vscode下载拓展工具

step3:在vscode的设置中加入如下的配置

"less.compile":{
    "outExt":".wxss"
}

 设置1

 设置2

设置3

step4:在要编写样式的地方，新建less文件，如index.less,然后正常编辑即可。

 

 使用sass

1.安装插件Live Scss Compiler



2.在项目根目录下创建文件夹 .vscode ,在文件夹下创建 settings.json 文件



3.配置settings.json



{

"liveSassCompile.settings.formats": [

{

"format": "expanded",

"extensionName": ".wxss",

"savePath": null

}

],

"liveSassCompile.settings.generateMap": false // 去掉map文件

}

4.点击vscode 底部栏的 Watch Sass 按钮