在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 相关文章推荐
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
JavaScript中实现map功能代码分享
Jun 11 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
vue实现表格合并功能
Dec 01 Vue.js
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
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
python实现360皮肤按钮控件示例
2014/02/21 Python
python对象及面向对象技术详解
2016/07/19 Python
Python使用pymysql小技巧
2017/06/04 Python
详解Python3中ceil()函数用法
2019/02/19 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
Python3 集合set入门基础
2020/02/10 Python
pygame实现飞机大战
2020/03/11 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
运行时异常与一般异常有何异同?
2014/01/05 面试题
远程研修随笔感言
2014/02/10 职场文书
教堂婚礼主持词
2014/03/14 职场文书
建设工地安全标语
2014/06/07 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
医德医风自我评价
2014/09/19 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python