支持多种样式预编译

Min 提供 postcss、less 预编译支持

使用 css 预编译语言，务必先在 .wxa、.wxp、.wxc单文件的 style 标签上增加 lang 属性，可选值分别为 less 和 pcss（pcss 是 postcss 的缩写）

使用 less 预编译：

  1. <style lang="less">
  2.   @size: 12px;
  3.   body {
  4.     font-size: @size;
  5.   }
  6. </style>

使用 postcss 预编译：

  1. <style lang="pcss">
  2.   $size: 12px;
  3.   body {
  4.     font-size: $size;
  5.   }
  6. </style>

单位转换

支持 px单位、rem单位 转换，对应于 1px = 1rpx 1rem = 100rpx

  • 转换前
  1. body {
  2.   font-size: 12px;
  3.   width: 1rem;
  4. }
  • 转换后
  1. body {
  2.   font-size: 12rpx;
  3.   width: 100rpx;
  4. }

使用 BEM 命名规范

Min 基于 postcss-bem 插件通过缩写和嵌套方式便于使用 bem 命名方法书写，分别以@b、@e、@m来定义块(block)、元素(element)、修饰符(modifier)。请设置 lang = "pcss" 后再使用bem命名规范

  1. <style lang="pcss">
  2. @b search {
  3.   padding: 0;
  5.   @e submit{
  6.     padding: 1rem;
  8.     @m button{
  9.       border: 1px solid #ccc;
  10.     }
  11.   }
  12. }
  13. </style>

转换后

  1. search {
  2.     padding: 0;
  3. }
  4. .search__submit {
  5.     padding: 100rpx;
  6. }
  7. .search__submit--button {
  8.     border: 1rpx solid #ccc;
  9. }

@import 外部文件

  • 在未使用任何css预编译，即 <style></style> 的 lang 属性为空。代码中 @import *.wxss 将会原始保留下来，非 .wxss 后缀文件将拷贝一份并更改后缀名为 .wxss
  1. <style>
  2.   @import './a.wxss';
  3.   @import './b.css';
  4. </style>

转换后

  1. @import './a.wxss';
  2. @import './b.wxss';
  • 在使用css预编译，即 <style></style> 的 lang 属性为 less 或 pcss。代码中 @import 外部文件都会通过编译器解析转换