支持多种样式预编译

Min 提供 postcss、less 预编译支持

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

使用 less 预编译:

<style lang="less">
  @size: 12px;
  body {
    font-size: @size;
  }
</style>

使用 postcss 预编译:

<style lang="pcss">
  $size: 12px;
  body {
    font-size: $size;
  }
</style>

单位转换

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

body {
  font-size: 12px;
  width: 1rem;
}
body {
  font-size: 12rpx;
  width: 100rpx;
}

使用 BEM 命名规范

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

<style lang="pcss">
@b search {
  padding: 0;

  @e submit{
    padding: 1rem;

    @m button{
      border: 1px solid #ccc;
    }
  }
}
</style>

转换后

search {
    padding: 0;
}
.search__submit {
    padding: 100rpx;
}
.search__submit--button {
    border: 1rpx solid #ccc;
}

@import 外部文件

<style>
  @import './a.wxss';
  @import './b.css';
</style>

转换后

@import './a.wxss';
@import './b.wxss';