微信小程序-4

一、使用scss编译wxss文件

1.vscode安装easysass扩展
vscode插件 - - - easysass - - - 安装

2.微信小程序 导入vscode扩展
开发者工具 - - - 视图 - - - 扩展 - - - 右侧三个点 - - - 导入已安装的vscode扩展

3.编辑 打开编辑器扩展目录，找到easysass文件夹，打开package.json文件

				"easysass.formats": {
   
					"type": "array",
					"default": [
						{
   
							"format": "expanded",
							"extension": ".css"
						},
						{
   
							"format": "compressed",
							"extension": ".min.css"
						}
					],
					"description": "Define format(s) for outputted css files. Use \"nested\", \"expanded\", \"compact\" or \"compressed\" as a format."
				},

找到上面的代码，修改为下面的样子

				"easysass.formats": {
   
					"type": "array",
					"default": [
						{
   
							"format": "expanded",
							"extension": ".wxss"
						}
					],
					"description": "Define format(s) for outputted css files. Use \"nested\", \"expanded\", \"compact\" or \"compressed\" as a format."
				},

4.项目 - - - 重新打开此项目
5.在该目录下新建scss文件

<view class="out">
  <view class="box">
    <view class="inner">
      <text class="text">小程序名称</text>
    </view>
  </view>
</view>

在scss文件里编译，保存后会自动在wxss文件里生成相应的样式

// scss文件 - - - 在scss文件中，//is注释
.out{
   
  background: pink;
  width: 500rpx;height: 500rpx;
  .box{
   
    width: 300rpx;height: 300rpx;
    background: red;
    .inner{
   
      width: 200rpx;height: 200rpx;
      background: purple;
    }
  }
  .row{
   
    width: 300rpx;height: 100rpx;
    background: orange;
  }
}

在wxss中生成的代码如下

.out {
   
  background: pink;
  width: 500rpx;
  height: 500rpx;
}

.out .box {
   
  width: 300rpx;
  height: 300rpx;
  background: red;
}

.out .box .inner {
   
  width: 200rpx;
  height: 200rpx;
  background: purple;
}

.out .row {
   
  width: 300rpx;
  height: 100rpx;
  background: orange;
}

二、页面初始化配置全局样式

1.修改app.wxss代码

/**app.wxss**/
view,text{
   
  box-sizing: border-box;
}
/* 全局配色 */
/* page是全局，定义全局变量 主题色 */
/* 双横线定义css变量 */
page{
   
  --themeColor