详解如何在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 while语句和do while语句的区别分析
Dec 08 Javascript
5款Javascript颜色选择器
Oct 25 Javascript
JavaScript CSS修改学习第三章 修改样式表
Feb 19 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
实例讲解JavaScript截取字符串
Nov 30 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
js实现tab栏切换效果
Aug 02 Javascript
OpenLayers3实现测量功能
Sep 25 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
B2K与车机的中波PK
2021/03/02 无线电
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
关于php循环跳出的问题
2013/07/01 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
js 事件小结 表格区别
2007/08/13 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
python开发之函数定义实例分析
2015/11/12 Python
Python实现的归并排序算法示例
2017/11/21 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
python程序封装为win32服务的方法
2021/03/07 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
销售员自我评价怎么写
2013/09/19 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
学子宴答谢词
2014/01/25 职场文书
合作意向协议书范本
2014/03/31 职场文书
探亲假请假条
2014/04/11 职场文书
数字化校园建设方案
2014/05/03 职场文书
小学家长学校培训材料
2014/08/24 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
nginx配置之并发频次限制
2022/04/18 Servers