# 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 等提升编码效率。