如何在javascript和sass之间共享变量

发表于 更新于 分类于 阅读次数：

在编程开发中，变量共享一直是程序员们所热爱的东西，因为我们都追求 极简主义，代码的高可维护性。这篇短文将介绍一种在 javascript 和 sass 之间进行变量共享的实现方式。

前言

我们都知道，同语言之间实现变量共享是很简单的，因为他们都有自己的模块机制。

javascript 中有 ES Modules

1
2
// a.js
export const foo = 1
1
2
3
// b.js
import { foo } from './a'
console.log(foo) // 1

sass 中有 @import

1
2
// variables.scss
$--color-prey: #ddd; 
1
2
3
4
5
6
// main.scss
@import './variables.scss'

.fc-prey {
  color: $--color-prey;
}

但，当我们想要在 b.js 中使用 variables.scss 中的变量时，看起来好像没那么简单。

幸运的是，当有了 webpack 和 CSS Modules 后，一切都变得简单起来了。接下来，开始讲解如何去实现它。

logo

准备

首先确保你的项目是工程化的，基于 webpack 构建的。你可以自行搭建，也可以使用现有的脚手架，比如 @vue/cli 、create-react-app 、create-nuxt-app 等。

然后确保安装了 sass 的编译器和对应 loader。你可以使用以下的任一种方式安装。

1
$ npm i node-sass sass-loader -D

或

1
2
# 使用 dart 作为 sass 编译器依赖
$ npm i sass sass-loader -D

使用

为了方便，我们直接使用 @vue/cli 进行构建。

现在，我们在项目中新建一个 variables.scss 文件，来定义样式变量。得益于 CSS Modules，我们可以在 variables.scss 中使用 :export 指令来向 javascript 导出变量，这就像 es6 中的 export 关键字一样。

1
2
3
4
5
6
7
8
// @/styles/variables.scss
$--color-primary: skyblue;
$--border-width: 2px;

:export {
  colorPrimary: $--color-primary;
  borderWidth: $--border-width;
}

如上所示，该 scss 文件向外导出了一个 javascript 对象。类似于这样。

1
2
3
4
export default {
  colorPrimary: 'skyblue',
  borderWidth: '2px'
}

接着，我们就可以这样使用它。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
  <div :style="{color: styleVar.colorPrimary}">CSS Modules</div>
</template>

<script>
import styleVariables from '@/styles/variables.scss'
export default {
  name: 'App',
  data() {
    return {}
  },
  computed: {
    styleVar() {
      return styleVariables
    }
  }
}
</script>

打开浏览器，你会看到有着 skyblue 字体颜色的 CSS Modules 文本。Yep！

好了，这就是这篇短文的全部内容了，玩的开心！