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

时间:2020-05-17 jason1992 人气:0

在环境之间共享变量是编程的圣杯。以下是在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之间同步更改的麻烦时，它会成倍地回报。

加载全部内容