JavaScript 如何与 CSS 和 Sass 共享数据

CSS 自定义属性现在也不算什么稀罕物了。自从浏览器开始支持以来，就能通过 JavaScript 操作自定义属性值。

具体来说，用 JavaScript 操作自定义属性有以下几种方式。第一个是 setProperty ：

<span class="hljs-built_in">document.documentElement.style.setProperty(<span class="hljs-string">"--padding", <span class="hljs-number">124 + <span class="hljs-string">"px"); </span></span></span></span>

还可以用 getComputedStyle ，原因很简单：自定义属性也是样式的一部分，因此也属于计算样式的一部分。

<span class="hljs-selector-tag">getComputedStyle(document.documentElement)<span class="hljs-selector-class">.getPropertyValue(<span class="hljs-string">'--padding') </span></span></span>

同样，还可以用 getPropertyValue 。它可以获取 html 元素的行内样式值：

<span class="hljs-built_in">document.documentElement.style.getPropertyValue(<span class="hljs-string">"--padding'"); </span></span>

注意，自定义属性是有作用域的。也就是说必须从指定元素获取计算后的样式。前面由于我们是 在 :root 里定义的变量，因此要从这个 html 元素上获取。

Sass 变量

Sass 是预处理语言，最终要转换成 CSS 才能应用到网站页面上。所以，像 CSS 自定义属性那样用 JavaScript 直接操作是行不通的。

为此，我们需要修改下构建流程。这一步可能不是必须的，因为大部分构建流程配置都已经包含了这些 loader。如果你的项目配置里没有的话，就需要加上如下的 webpack 配置：

<span class="hljs-attr">module.exports = {<br> // ...<br> module: {<br>  rules: [<br>   {<br>    test: /\.scss$/,<br>    use: [<span class="hljs-string">"style-loader", <span class="hljs-string">"css-loader", <span class="hljs-string">"sass-loader"]<br>   },<br>   // ...<br>  ]<br> }<br>}</span></span></span></span>

为了让 Sass（准确地说这里是 SCSS）变量在 JavaScript 里可用，我们需要将其导出（ export ）：

// variables.scss<br><span class="hljs-variable">$primary-color: </span>

这里的 :export 部分是黑魔法所在，webpack 就是用它来导入变量的。这种方法的妙处是可以用 camelCase 格式重命名变量，并可以选择要导出的变量。

然后把 Sass 文件（ variables.scss ）导入到 JavaScript，这样就可以访问文件里的变量了。神不神奇，意不意外？

<span class="hljs-keyword">import variables <span class="hljs-keyword">from <span class="hljs-string">'./variables.scss';<br><br>/*<br> {<br>  primaryColor: <span class="hljs-string">"#fe4e5e"<br>  backgroundColor: <span class="hljs-string">"#fefefe"<br>  padding: <span class="hljs-string">"124px"<br> }<br>*/<br><br>document.getElementById(<span class="hljs-string">"app").style.padding = variables.padding;<br></span></span></span></span></span></span></span>

值得一提的是， :export 语法有一些限制：

• 可以在文件里的任何位置，但必须位于顶层
• 如果文件里有多个，这些键和值会合并在一起导出
• 如果某个 exportedKey 有重复，后面的会覆盖前面的
• exportedValue 可以包含 CSS 声明中的任意有效字符（包括空格）
• exportedValue 不需要加引号，因为它已经被处理成字符串了。

在 JavaScript 中访问 Sass 变量的应用场景有哪些呢？其中一个是共享媒体查询中的断点配置。比如这里的 breakpoints.scs 文件，可以用于 JavaScript 中的 matchMedia() 方法，来保持断点设置的一致性。

/<span class="hljs-regexp">/&#x5B9A;&#x4E49;&#x65AD;&#x70B9;&#x7684; Sass &#x53D8;&#x91CF;<br><span class="hljs-regexp">$breakpoints: (<br><span class="hljs-regexp">  mobile: 375px,<br><span class="hljs-regexp">  tablet: 768px,<br><span class="hljs-regexp">  /<span class="hljs-regexp">/ etc.<br><span class="hljs-regexp">);<br><br><span class="hljs-regexp">/<span class="hljs-regexp">/ &#x7528;&#x4E8E;&#x5A92;&#x4F53;&#x67E5;&#x8BE2;&#x7684; Sass variables <br><span class="hljs-regexp">$media: (<br><span class="hljs-regexp">  mobile: '(max-width: <span class="hljs-subst">#{map-get($breakpoints, mobile)})',<br><span class="hljs-regexp">  tablet: '(max-width: <span class="hljs-subst">#{map-get($breakpoints, tablet)})',<br><span class="hljs-regexp">  /<span class="hljs-regexp">/ etc.<br><span class="hljs-regexp">);<br><br><span class="hljs-regexp">/<span class="hljs-regexp">/ &#x5BFC;&#x51FA;&#x90E8;&#x5206;<br><span class="hljs-regexp">:export {<br><span class="hljs-regexp">  breakpointMobile: unquote(map-get($media, mobile));<br><span class="hljs-regexp">  breakpointTablet: unquote(map-get($media, tablet));<br><span class="hljs-regexp">  /<span class="hljs-regexp">/ etc.<br><span class="hljs-regexp">}<br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

动画是另一个应用场景。动画的持续时间通常保存在 CSS 中，但是更复杂的动画可能需要 JavaScript 来实现。

// animation.scss<br><span class="hljs-variable">$global-animation-duration: 300ms;<br><span class="hljs-variable">$global-animation-easing: ease-in-out;<br><br>:<span class="hljs-built_in">export {<br>  animationDuration: strip-unit(<span class="hljs-variable">$global-animation-duration);<br>  animationEasing: <span class="hljs-variable">$global-animation-easing;<br>}<br></span></span></span></span></span>

注意，这里在导出变量时用了 strip-unit 函数，目的是为了去掉单位，方便在 JavaScript 里转换数字。

<span class="hljs-string">// <span class="hljs-string">main.<span class="hljs-string">js</span><br><span class="hljs-string">document.getElementById('image').animate([<br>  { <span class="hljs-attr">transform: <span class="hljs-string">'scale(1)', <span class="hljs-attr">opacity: <span class="hljs-number">1, <span class="hljs-attr">offset: <span class="hljs-number">0 }<span class="hljs-string">,<br>  { <span class="hljs-attr">transform: <span class="hljs-string">'scale(.6)', <span class="hljs-attr">opacity: <span class="hljs-number">.6, <span class="hljs-attr">offset: <span class="hljs-number">1 }<br><span class="hljs-string">], {<br>  <span class="hljs-attr">duration: <span class="hljs-string">Number(variables.animationDuration),<br>  <span class="hljs-attr">easing: <span class="hljs-string">variables.animationEasing,<br>}<span class="hljs-string">);<br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

还有一个是 echarts 图系列的颜色列表。比如饼图的各个部分用的颜色序列，可能也要在图之外使用。为了便于维护，最好是定义在同一个地方。

总之，这样就可以轻松地实现 CSS、Sass 和 JavaScript 之间交换数据，确实挺不错。变量共享让代码变得更简单，实现了 DRY（Dont’ Repeat Yourself)。

Original: https://www.cnblogs.com/Qooo/p/15144134.html
Author: 酷儿q
Title: JavaScript 如何与 CSS 和 Sass 共享数据