前言
在前端开发中，我们通常使用 Sass 来处理样式，但是如果我们希望在 JavaScript 中获取 Sass 中定义的变量，就比较困难了。而 ember-export-sass-variables 这个 npm 包就能够很好地解决这个问题。本文将会介绍此 npm 包的使用方法。
安装
通过 npm 安装 ember-export-sass-variables
npm install ember-export-sass-variables --save-dev
使用方法
在项目的根目录下创建 ember-cli-build.js 文件，并在其中引入 ember-export-sass-variables，然后使用 ENV.sassOptions 来配置需要导出的变量。
-- -------------------- ---- -------
----- -------- - --------------------------------------------
----- ------------------- - ---------------------------------------
-------------- - ------------------ -
--- --- - --- ------------------ -
------------ -
---------- ----------------------
------------- -
-------------
--------------------------------------------------
-----------------------------
-
-
---
------ -------------
--配置完成后，在 Sass 文件中定义好变量，然后通过 getVariable() 函数即可获取对应的变量。
$primary-color: #0074D9;
$secondary-color: #001F3F;
:export {
primaryColor: getVariable('$primary-color');
secondaryColor: getVariable('$secondary-color');
}上面的 Sass 代码将 $primary-color 和 $secondary-color 变量导出成为 primaryColor 和 secondaryColor。
在 JavaScript 中，通过 sassVariables.default 可以获取到导出的变量
import sassVariables from '../config/exported-sass-variables';
console.log(sassVariables.default); // { primaryColor: "#0074D9", secondaryColor: "#001F3F" }注意事项
- 使用
ember-export-sass-variables必须在配置 Sass 的时候将functions配置为exportSassVariables() - 导出的变量都将会被转为小驼峰命名，如：
$primary-color将被转为primaryColor - 在定义导出变量时，需要使用
:export声明导出区域，并使用getVariable()函数来获取对应的变量 - 在 JavaScript 文件中，通过
sassVariables.default可以获取导出的变量
总结
本文介绍了 npm 包 ember-export-sass-variables 的使用方法。通过使用此包，我们可以很方便地将 Sass 中定义的变量导出到 JavaScript 中，并使用这些变量。这对于前端开发来说是一个非常实用的功能，同时也提高了开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e16a563576b7b1eca1e