详解如何在Javascript和Sass之间共享变量


Posted in Javascript onNovember 13, 2019

在环境之间共享变量是编程的圣杯。以下是在Javascript和

Sass(或CSS!)之间共享变量的方法。

随着大型单页应用程序的兴起,Javascript和CSS越来越交织在一起。通常在两个值之间复制值(例如,与React的CSSTransitionGroup一起使用的动画持续时间或将品牌颜色传递到图形库中)。但是,保持两个具有相同值的副本不可避免地导致仅更新一个副本并最终导致令人沮丧的错误。幸运的是,使用webpack和CSS模块,有更好的方法。在此博客文章中,我们将通过上述示例为共享动画持续时间,探讨如何在脚本和样式之间共享变量CSSTransitionGroup。

第一步是安装我们的依赖项:

npm install sass-loader node-sass webpack --save-dev

接下来,我们需要配置webpack以便使用,sass-loader以便我们可以从Javascript访问我们的Sass代码。

// webpack.config.js
  module.exports = {
   module: {
    rules: [
     {
      test: /\.css$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
     }
    ]
   }
  }

现在开始有趣的部分。我们在Sass中定义实际的变量值,并将其导出到Javascript。CSS模块有一个名为的简洁实用程序:export。该:export指令的工作原理基本上类似于ES6的export关键字。您的Sass代码将导出一个对象,其中包含要在Javascript中使用的变量名称及其关联的值。这些值都导出为字符串。

// styles/animation.scss
  $animation-length: 250;
  $animation-length-ms: $animation-length + 0ms;

  :export {
   animationMillis: $animation-length-ms;
  }

  .component-enter {
   ...

   transition: all $animation-length-ms ease-in;
  }

您会注意到,我们首先在一个变量中声明整数值,然后在另一个变量中将0ms其添加。这样一来,我们就只能导出,"250"而不是"250ms"在Javascript方面更容易解析(将0ms数字强制将其“类型”插入ms)。

现在,在Javascript中,我们只需要从样式表中导入样式,然后从导出的变量中解析出一个int即可!

// js/animation.js
import styles from '../styles/animation.scss'
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'

const millis = parseInt(styles.animationMillis)

...

<CSSTransitionGroup
 transitionName="component"
 transitionEnterTimeout={millis}
 transitionLeaveTimeout={millis}
/>

...

这种方法非常简单,但是当您避免在Javascript和Sass之间同步更改的麻烦时,它会成倍地回报。

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

Javascript 相关文章推荐
JavaScript中的排序算法代码
Feb 22 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
早该知道的7个JavaScript技巧
Mar 27 Javascript
浅谈JavaScript之事件绑定
Jul 08 Javascript
玩转方法:call和apply
May 08 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
js实现图片上传预览原理分析
Jul 13 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
javascript实现前端分页效果
Jun 24 Javascript
JavaScript数组及常见操作方法小结
Nov 13 #Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 #Javascript
javascript操作元素的常见方法小结
Nov 13 #Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 #Javascript
vue项目中锚点定位替代方式
Nov 13 #Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 #Javascript
jQuery实现滑动星星评分效果(每日分享)
Nov 13 #jQuery
You might like
利用PHP动态生成VRML网页
2006/10/09 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
用cssText批量修改样式
2009/08/29 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
深入解析Python编程中JSON模块的使用
2015/10/15 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
虚拟机下载python是否需要联网
2020/07/27 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
西安大雁塔导游词
2015/02/10 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
Redis集群的关闭与重启操作
2021/07/07 Redis