# CSS 处理

# CSS 预编译

Mpx 支持 CSS 预编译处理,你可以通过在 style 标签上设置 lang 属性,来指定使用的 CSS 预处理器。Mpx 会根据指定的 CSS 预处理器类型,将其编译为浏览器可识别的 CSS 标准代码。

<!-- 使用 stylus -->
<style lang="stylus">
  .nav
    width 100px
    height 80px
    color #f90
    &:hover
      background-color #f40
      color #fff
</style>
<!-- 使用 sass  -->
<style lang="scss">
  .nav {
    width: 100px;
    height: 80px;
    color: #f90
    &:hover {
      background-color: #f40;
      color: #fff
    }
  }
</style>
<!-- 使用 less -->
<style lang="less">
  .size {
    width: 100px;
    height: 80px
  }
  .nav {
    .size();
    color: #f90;
    &:hover {
      background-color: #f40;
      color: #fff
    }
  }
</style>

# 公共样式复用

为了达到最大限度的样式复用,Mpx 提供了以下两种方式实现公共样式抽离,但是最终打包的效果有所区别。

// styles/mixin.styl
.header-styl
  width 100%
  height 100px
  background-color #f00

# style src 复用

通过给 style 标签添加 src 属性引入外部样式,最终公共样式代码只会打包一份。

<!-- index.mpx -->
<style lang="stylus" src="../styles/mixin.styl"></style>
<!-- list.mpx -->
<style lang="stylus" src="../styles/mixin.styl"></style>

Mpx 将 mixin.styl 中的代码经过 loader 编译后生成一份单独的 wxss 文件,这样既实现了样式抽离,又能节省打包后的代码体积。

# @import 复用

如果指定 style 标签的 lang 属性并且使用 @import 导入样式,那么这个文件经过对应的 loader 处理之后的内容会重复打包到引用它的文件目录下,并不会抽离成单独的文件,这样无形中增加了代码体积。

<!-- index.mpx -->
<style lang="stylus">
  @import "../styles/mixin.styl"
</style>
<!-- list.mpx -->
<style lang="less">
  @import "../styles/mixin.less";
</style>

如果导入的是一份 css 文件,则最终打包后的效果与 style src 一致。

// styles/mixin.css
.header-css {
  width: 100%;
  height: 100px;
  background-color: #f00;
}
<!-- index.mpx -->
<style>
  @import "../styles/mixin.css";
</style>
<!-- list.mpx -->
<style>
  @import "../styles/mixin.css";
</style>

对于多个页面或组件公用的样式,建议使用 style src 形式引入,避免一份样式被内联打成多份,同时还能使用 less、scss 等提升编码效率。