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

發布時間: 2020-01-02 12:28:13 來源: 互聯網 欄目: JavaScript 點擊:

這篇文章主要介紹了在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 [email protected] node-sass

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

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

3.為了更好的組織項目結夠和樣式的統一,我們會把一些主題顏色、字體大小、文字顏色提取到一個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 的優勢代碼層級嵌套。為此我們引入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了

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持我們。

本文標題: 在weex中愉快的使用scss的方法步驟
本文地址: http://www.1921352.live/wangluo/javascript/296720.html

如果認為本文對您有所幫助請贊助本站

支付寶掃一掃贊助微信掃一掃贊助

  • 支付寶掃一掃贊助
  • 微信掃一掃贊助
  • 支付寶先領紅包再贊助
    聲明:凡注明"本站原創"的所有文字圖片等資料,版權均屬編程客棧所有,歡迎轉載,但務請注明出處。
    nodejs開發一個最簡單的web服務器實例講解Element-UI+Vue模式使用總結
    Top 网上挖矿机赚钱