摘要 今天小编跟大家讲解下有关JavaScript 如何与 CSS 和 Sass 共享数据 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关Jav

今天小编跟大家讲解下有关JavaScript 如何与 CSS 和 Sass 共享数据 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关JavaScript 如何与 CSS 和 Sass 共享数据 的相关资料，希望小伙伴们看了有所帮助。

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

来源：爱蒂网