weex 是一个能够利用 vue 或者 Rax 编写跨平台手机应用的框架。为了让在 weex 有更好的样式编写体验,遂有了如下的方案。
1.初始化一个 weex
工程javascript
npm install weex-toolkit -g weex create weex-test cd weex-test npm run start
这时候就能够在浏览器看到界面了css
2.接着为了能够在vue里面写scss, 咱们须要安装两个东西, sass-loader
、node-sass
vue
npm install -D sass-loader@7.3.1 node-sass
在这里要注意一点sass-loader要安装 7 版本的,否则会报错,这是由于sass版本高致使的,接下来就能够愉快的写scss,还要注意一点须要在style标签加上语言标记scssjava
<style lang="scss"> </style>
3.为了更好的组织项目结够和样式的统一,咱们会把一些主题颜色、字体大小、文字颜色提取到一个scss文件,咱们把它命名为variable.scss
以下:node
$theme-color: blue; $font-big: 32px; $font-nor: 28px; $font-small: 24px;
咱们把它放到项目的src/common/scss
下, 须要的时候就在vue文件中引用, 好比在 index.vue
页面引用npm
<style lang="scss"> @import './common/scss/variable.scss' div { background-color: $theme-color; } </style>
这样就可让应用的主体部分的样式保持一致了。浏览器
4.在 weex
中有一些属性不支持简写的方式好比 border,还有一些须要写两三条的样式如文字超出隐藏,这种样式咱们能够将它们定义成scss的混合宏(mixin),咱们把它命名为mixins.scss
sass
@mixin border($width, $style, $color) { border-width: $width; border-style: $style; border-color: $color; } @mixin border-top($width, $style, $color) { border-top-width: $width; border-top-style: $style; border-top-color: $color; }
咱们把它放到项目的src/common/scss
下, 须要的时候就在vue文件中引用, 好比在 index.vue
页面引用weex
<style lang="scss"> @import './common/scss/variable.scss'; @import './common/scss/mixins.scss'; div { @include border(1px, solid, $theme-color); } </style>
这样咱们就能够将一些经常使用的css
代码写进混合宏了框架
5.在weex
中因为不支持类名的权重覆盖,只支持后面的定义的同类样式覆盖前面的样式,这样就会致使咱们不能很好的组织 css
代码, 又不能利用 scss
的优点代码层级嵌套。为此咱们引入BEM
命名方法,并经过scss
的混合宏让其在写法上支持嵌套,首先咱们在 src/common/scss
下建立 bem.scss
,并写入以下代码:
$namespace: ''; $element-separator: '__'; $modifier-separator: '--'; @mixin b($block) { @if $namespace == '' { $B: $block !global; } @else { $B: $namespace+'-'+$block !global; } @if '#{&}' == '' { .#{$B} { @content; } } @else { @at-root { .#{$B} { @content; } } } } @mixin e($element) { $E: $element !global; $selector: &; @if str-index('#{&}', '__') { @at-root { .#{$B + $element-separator + $element} { @content; } } } @else { @at-root { #{&+$element-separator+$E} { @content; } } } } @mixin m($modifier) $M: $modifier !global; @at-root { #{&+$modifier-separator+$M} { @content; } } }
因为weex
不支持层级因此咱们只能用@at-root
将全部类名提高到第一层。接着咱们在index.vue
中引入这个文件:
<template> <div class="header"> <div :class="['header__back', `header__back--${status}`]"></div> <div class="header__content"></div> <div class="header__other"></div> </div> </template> <script> export default { data(){ return { status: 'black' } } } </script> <style lang="scss"> @import './common/scss/variable.scss'; @import './common/scss/mixins.scss'; @import './common/scss/bem.scss' @include b('header') { height: 100px; width: 750px; flex-direction: row; align-items: center; @include e('back') { flex: 1; @include m('black') { background-color: #000000; } @include m('white') { background-color: #ffffff; } } @include e('content') { flex: 3; } @include e('other') { flex: 1; } } </style>
编译后的样式为:
.header { height: 100px; width: 750px; flex-direction: row; align-items: center; } .header__back { flex: 1; } .header__back--black { background-color: #000000; } .header__back--white { background-color: #ffffff; } .header__content { flex: 3; } .header__other { flex: 1; }
这样看起来用scss的写法代码的结构性和可维护性就会更好一些。
6.因为这三个文件都是须要在每个vue文件引入的,为了偷一下懒,咱们能够用sass-resources-loader
这个loader来让每个vue文件都注入这几个scss
文件
npm install -D sass-resources-loader
而后修改根目录下的 configs/utils.js
,找到以下,进行更改
const generateLoaders = (loader, loaderOptions) => { let loaders = options.useVue ? [cssLoader] : [] if (options.usePostCSS) { loaders.push(postcssLoader) } if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } //这里加入如下代码 if (loader === 'sass') { loaders.push({ loader: 'sass-resources-loader', options: { resources: [ path.resolve(__dirname, '../src/common/scss/variable.scss'), path.resolve(__dirname, '../src/common/scss/mixins.scss'), path.resolve(__dirname, '../src/common/scss/bem.scss') ] } }) } if (options.useVue) { return ['vue-style-loader'].concat(loaders) } else { return loaders } }
这样就能够在weex
工程中愉快的编写scss
了