Fork me on GitHub

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

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

前言

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

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 后,一切都变得简单起来了。接下来,开始讲解如何去实现它。

准备

首先确保你的项目是工程化的,基于 webpack 构建的。你可以自行搭建,也可以使用现有的脚手架,比如 @vue/clicreate-react-appcreate-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!

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

0%