[译] JavaScript 如何与 CSS 和 Sass 共享数据

持续进步的同学都关注了 “ 1024译站 ”

这是1024译站的第 82 篇文章 

来源：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)。

想加群交流学习的看这里：

大佬云集的前端群，不进来看看？

顺手点“在看”，每天早下班；转发加关注，共奔小康路~