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


Posted in Javascript onJanuary 02, 2020

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.为了更好的组织项目结够和样式的统一,我们会把一些主题颜色、字体大小、文字颜色提取到一个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了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery对象和DOM对象使用说明
Jun 25 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
vue-router 组件复用问题详解
Jan 22 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 Javascript
javascript的setTimeout()使用方法总结
Nov 20 Javascript
JS实现导航栏楼层特效
Jan 01 #Javascript
JS实现旋转木马轮播图
Jan 01 #Javascript
JS实现普通轮播图特效
Jan 01 #Javascript
javascript实现超好看的3D烟花特效
Jan 01 #Javascript
JavaScript工具库MyTools详解
Jan 01 #Javascript
javascript Canvas动态粒子连线
Jan 01 #Javascript
小程序新版订阅消息模板消息
Dec 31 #Javascript
You might like
PHP脚本的10个技巧(6)
2006/10/09 PHP
php数组转成json格式的方法
2015/03/09 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
Python操作Excel之xlsx文件
2017/03/24 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
Python 串口读写的实现方法
2019/06/12 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
python实现逻辑回归的示例
2020/10/09 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
经典导游欢迎词大全
2014/01/16 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
欢迎家长标语
2014/10/08 职场文书
2015年科协工作总结
2015/05/19 职场文书
python实现求纯色彩图像的边框
2021/04/08 Python
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js