在weex中愉快的使用scss的方法步驟

更新時間：2020年01月02日 08:30:44 作者：雨林

這篇文章主要介紹了在weex中愉快的使用scss的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

weex 是一個可以利用 vue 或者 Rax 編寫跨平臺手機應用的框架。為了讓在 weex 有更好的樣式編寫體驗，遂有了以下的方案。

1.初始化一個 weex 工程

npm install weex-toolkit -g
weex create weex-test
cd weex-test
npm run start

這時候就可以在瀏覽器看到界面了

2.接著為了可以在vue里面寫scss，我們需要安裝兩個東西， sass-loader、node-sass

npm install -D sass-loader@7.3.1 node-sass

在這里要注意一點sass-loader要安裝 7 版本的，不然會報錯，這是因為sass版本高導致的，接下來就可以愉快的寫scss，還要注意一點需要在style標簽加上語言標記scss

<style lang="scss">
</style>

3.為了更好的組織項目結夠和樣式的統(tǒng)一，我們會把一些主題顏色、字體大小、文字顏色提取到一個scss文件,我們把它命名為variable.scss如下：

$theme-color: blue;

$font-big: 32px;
$font-nor: 28px;
$font-small: 24px;

我們把它放到項目的src/common/scss下，需要的時候就在vue文件中引用, 比如在 index.vue 頁面引用

<style lang="scss">
@import './common/scss/variable.scss'
div {
  background-color: $theme-color;
}
</style>

這樣就可以讓應用的主體部分的樣式保持一致了。

4.在 weex 中有一些屬性不支持簡寫的方式比如 border，還有一些需要寫兩三條的樣式如文字超出隱藏，這種樣式我們可以將它們定義成scss的混合宏（mixin）,我們把它命名為mixins.scss

@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 頁面引用

<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 的優(yōu)勢代碼層級嵌套。為此我們引入BEM命名方法，并通過scss的混合宏讓其在寫法上支持嵌套，首先我們在 src/common/scss 下創(chuàng)建 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了

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: