在 Javascript 和 Sass（或 CSS！）之间共享变量的方法

随着大型单页应用程序的兴起，Javascript 和 CSS 越来越交织在一起。通常会在两者之间复制值（例如，与 React 的CSSTransitionGroup (opens new window)一起使用的动画持续时间或将品牌颜色传递到图形库中）。但是，维护相同值的两个副本不可避免地会导致只更新一个并最终导致令人沮丧的错误。幸运的是，使用webpack (opens new window)和CSS 模块 (opens new window)，有更好的方法。

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

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']
      }
    ]
  }
}

1
2
3
4
5
6
7
8
9
10
11

现在是有趣的部分。我们在 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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

你会注意到我们首先在一个变量中声明整数值，然后在另一个变量中添加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}
/>

...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

上次更新: 2022/06/05, 20:31:36

← float 布局看不见的html标签→