在Javascript和Sass实现共享变量的方法

发布时间:2021-02-02 13:50:52 作者:小新
来源:亿速云 阅读:247

这篇文章主要介绍在Javascript和Sass实现共享变量的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

在环境之间共享变量是编程的圣杯。以下是在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和Sass实现共享变量的方法”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. Sass学习笔记 -- 在Windows系统中安装Sass和Compass
  2. sass、scss、和css的关系

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript sass

上一篇:Spring boot配置请求入参和出参json数据格式的示例

下一篇:springboot项目启动时初始化资源如何解决

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》