来源： css-tricks.com
作者：Marko Ilic
编译：大道至简
JavaScript 与 CSS 已经相生相伴 20 年了，但是要在它们之间共享数据却非常困难。当然，这方面肯定有过一些尝试，不过我想到的是简单而又直观的做法：不需要做代码结构上的改动，而是利用 CSS 自定义属性，甚至是 Sass 变量。
CSS 自定义属性
CSS 自定义属性现在也不算什么稀罕物了。自从浏览器开始支持以来，就能通过 JavaScript 操作自定义属性值。
具体来说，用 JavaScript 操作自定义属性有以下几种方式。第一个是 setProperty：
document.documentElement.style.setProperty("--padding", 124 + "px"); // 124px
还可以用getComputedStyle，原因很简单：自定义属性也是样式的一部分，因此也属于计算样式的一部分。
getComputedStyle(document.documentElement).getPropertyValue('--padding') // 124px
同样，还可以用getPropertyValue。它可以获取 HTML 元素的行内样式值：
document.documentElement.style.getPropertyValue("--padding'"); // 124px
注意，自定义属性是有作用域的。也就是说必须从指定元素获取计算后的样式。前面由于我们是 在
:root里定义的变量，因此要从这个 HTML 元素上获取。
Sass 变量
Sass 是预处理语言，最终要转换成 CSS 才能应用到网站页面上。所以，像 CSS 自定义属性那样用 JavaScript 直接操作是行不通的。
为此，我们需要修改下构建流程。这一步可能不是必须的，因为大部分构建流程配置都已经包含了这些 loader。如果你的项目配置里没有的话，就需要加上如下的 webpack 配置：
module.exports = {
// ...
module: {
rules: [
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"]
},
// ...
]
}
};
为了让 Sass（准确地说这里是 SCSS）变量在 JavaScript 里可用，我们需要将其导出（export）：
// variables.scss
$primary-color: #fe4e5e;
$background-color: #fefefe;
$padding: 124px;
:export {
primaryColor: $primary-color;
backgroundColor: $background-color;
padding: $padding;
}
这里的 :export 部分是黑魔法所在，webpack 就是用它来导入变量的。这种方法的妙处是可以用 camelCase 格式重命名变量，并可以选择要导出的变量。
然后把 Sass 文件（variables.scss）导入到 JavaScript，这样就可以访问文件里的变量了。神不神奇，意不意外？
import variables from './variables.scss';
/*
{
primaryColor: "#fe4e5e"
backgroundColor: "#fefefe"
padding: "124px"
}
*/
document.getElementById("app").style.padding = variables.padding;
值得一提的是，:export 语法有一些限制：
- 可以在文件里的任何位置，但必须位于顶层
- 如果文件里有多个，这些键和值会合并在一起导出
- 如果某个
exportedKey有重复，后面的会覆盖前面的 -
exportedValue可以包含 CSS 声明中的任意有效字符（包括空格） -
exportedValue不需要加引号，因为它已经被处理成字符串了。
在 JavaScript 中访问 Sass 变量的应用场景有哪些呢？其中一个是共享媒体查询中的断点配置。比如这里的breakpoints.scs 文件，可以用于 JavaScript 中的 matchMedia()方法，来保持断点设置的一致性。
//定义断点的 Sass 变量
$breakpoints: (
mobile: 375px,
tablet: 768px,
// etc.
);
// 用于媒体查询的 Sass variables
$media: (
mobile: '(max-width: #{map-get($breakpoints, mobile)})',
tablet: '(max-width: #{map-get($breakpoints, tablet)})',
// etc.
);
// 导出部分
:export {
breakpointMobile: unquote(map-get($media, mobile));
breakpointTablet: unquote(map-get($media, tablet));
// etc.
}
动画是另一个应用场景。动画的持续时间通常保存在 CSS 中，但是更复杂的动画可能需要 JavaScript 来实现。
// animation.scss
$global-animation-duration: 300ms;
$global-animation-easing: ease-in-out;
:export {
animationDuration: strip-unit($global-animation-duration);
animationEasing: $global-animation-easing;
}
注意，这里在导出变量时用了strip-unit函数，目的是为了去掉单位，方便在 JavaScript 里转换数字。
// main.js
document.getElementById('image').animate([
{ transform: 'scale(1)', opacity: 1, offset: 0 },
{ transform: 'scale(.6)', opacity: .6, offset: 1 }
], {
duration: Number(variables.animationDuration),
easing: variables.animationEasing,
});
还有一个是 echarts 图系列的颜色列表。比如饼图的各个部分用的颜色序列，可能也要在图之外使用。为了便于维护，最好是定义在同一个地方。
总之，这样就可以轻松地实现 CSS、Sass 和 JavaScript 之间交换数据，确实挺不错。变量共享让代码变得更简单，实现了 DRY（Dont' Repeat Yourself)。
网友评论