详解如何在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 相关文章推荐
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
javascript window对象属性整理
Oct 24 Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
浅析return false的正确使用
Nov 04 Javascript
javascript运动详解
Jul 06 Javascript
详解jQuery中的元素的属性和相关操作
Aug 14 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
微信小程序block的使用教程
Apr 01 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 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
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
php实现ip白名单黑名单功能
2015/03/12 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
Sample script that deletes a SQL Server database
2007/06/16 Javascript
JavaScript Sort 表格排序
2009/10/31 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
javascript常见操作汇总
2014/09/03 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
微信小程序使用Socket的实例
2017/09/19 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
js实现点赞效果
2020/03/16 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
vue中如何添加百度统计代码
2020/12/19 Vue.js
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
安全环保演讲稿
2014/08/28 职场文书
国防教育标语
2014/10/08 职场文书
2014年工会工作总结
2014/11/12 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书