在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 Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
xmlhttp缓存清除的2种解决方法
Dec 13 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
javascript截取字符串小结
Apr 28 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
JavaScript实现多球运动效果
Sep 07 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 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
一个捕获函数输出的函数
2007/02/14 PHP
记录mysql性能查询过程的使用方法
2013/05/02 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
Javascript学习笔记5 类和对象
2010/01/11 Javascript
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
Puppet的一些技巧
2018/09/17 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
详细介绍Python中的偏函数
2015/04/27 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
详解Python文件修改的两种方式
2019/08/22 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
美德少年事迹材料
2014/01/23 职场文书
学籍证明模板
2014/11/21 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL