WXSS 模板样式 - 样式导入

WXSS 模板样式 - 样式导入

1. 什么是样式导入

使用 WXSS 提供的 @import 语法，可以导入外部样式表，实现样式复用和模块化开发。

2. @import 的语法格式

@import 后跟需要导入的外部样式表的相对路径，用 “;” 表示语句结束，格式如下：

@import "common.wxss";

示例代码：

假设我们有两个 WXSS 文件，分别为 common.wxss 和 app.wxss。其中，common.wxss 定义了一个 .small-p 样式类，app.wxss 中需要使用这个样式类，可以通过 @import 导入 common.wxss。

common.wxss 内容如下：

.small-p {
  padding: 5px;
}

app.wxss 内容如下：

@import "common.wxss";
.middle-p {
  padding: 15px;
}

其中，.middle-p 样式类可以直接使用 .small-p 样式类的样式属性。

3. 总结

使用 @import 导入外部样式表，可以实现样式复用和模块化开发，提高代码的可维护性和重用性。

示例代码：

// common.wxss
.small-p {
  padding: 5px;
}

// app.wxss
@import "common.wxss";
.middle-p {
  padding: 15px;
}