在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 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
Javascript 调试利器 Firebug使用详解六
Jul 05 Javascript
Array.prototype.slice 使用扩展
Jun 09 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
javascript中indexOf技术详解
May 07 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
json.stringify()与json.parse()的区别以及用处
Jan 25 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+dbfile开发小型留言本
2006/10/09 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
python发布模块的步骤分享
2014/02/21 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
人机交互程序 python实现人机对话
2017/11/14 Python
python:print格式化输出到文件的实例
2018/05/14 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
开办大学饮食联盟创业计划书
2014/01/29 职场文书
学习礼仪心得体会
2014/09/01 职场文书
2015年老干部工作总结
2015/04/23 职场文书
撤诉申请怎么写
2015/05/19 职场文书