在 weex 中愉快的使用 scss

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-loadernode-sassvue

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.scsssass

@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

相关文章
相关标签/搜索