作者：MarkoIlic。但在它们之间共享数据非常困难。当然，也有很多尝试。但我想到的是一些简单直观的东西——不涉及结构变化，而是使用CSS自定义属性甚至Sass变量。CSS自定义属性和JavaScript自定义属性在这里应该不足为奇。自从浏览器支持它以来，他们一直在做的一件事就是使用JavaScript来设置和操作值。不过，具体来说，我们可以通过多种方式让JavaScript使用自定义属性。可以使用setProperty设置自定义属性的值：document.documentElement.style.setProperty("--padding",124+"px");//124px我们还可以在JavaScript中使用getComputedStyle检索CSS变量。这背后的逻辑非常简单：自定义属性是样式的一部分，因此它们也是计算样式的一部分。getComputedStyle(document.documentElement).getPropertyValue('--padding')//124px与getPropertyValue相同。这样我们就可以从HTML标签的内联样式中获取自定义属性值。document.documentElement.style.getPropertyValue("--padding'");//124px请注意，自定义属性是有范围的。这意味着我们需要从特定元素中获取计算样式。正如我们之前在:root中定义变量一样，我们将它们放在HTML元素上。Sass变量和JavaScriptSass是一种预处理语言，这意味着它在成为网站的一部分之前会变成CSS。因此它们不能像CSS自定义属性一样从JavaScript访问（它们可以在DOM中作为计算样式访问）。我们需要通过修改我们自己的构建过程来改变这一点。我怀疑在大多数情况下不需要做太多事情，因为加载器通常已经是构建过程的一部分。但如果您的项目不是这种情况，我们需要三个能够导入和翻译Sass模块的模块。这在Webpack配置中看起来像这样：module.exports={//...module:{rules:[{test:/\.scss$/,use:["style-loader","css-loader","sass-loader"]},//...]}};为了使Sass（或者在这种情况下，特别是SCSS）变量可用于JavaScript，我们需要“导出”它们。//variables.scss$primary-color:#fe4e5e;$background-color:#fefefe;$padding:124px;:export{primaryColor:$primary-color;背景颜色：$背景色；padding:$padding;}：导出块是webpack用来导入变量的。这种方法的好处是我们可以重命名驼峰语法中的变量并选择要公开的内容。然后，将Sass文件(variables.scss)导入JavaScript以访问文件中定义的变量。从'./variables.scss'导入变量；/*{primaryColor:"#fe4e5e"backgroundColor:"#fefefe"padding:"124px"}*/document.getElementById("app").style.padding=variables.padding;值得一提的是对:export语法的一些限制：它必须在顶层，但它可以在文件中的任何位置。如果有多个文件，key和value会合并一起导出。如果复制了特定的exportedKey，则最后一个（按源顺序）优先。exportedValue可以包含CSS声明值中的任何有效字符（包括空格）。exportedValue不需要加引号，因为它已被视为文本字符串。有很多方法可以方便地在JavaScript中访问Sass变量。我倾向于使用这种共享断点的方法。下面是我的breakpoints.scs文件，稍后我将其导入JavaScript，以便我可以使用matchMedia()方法来获得一致的断点。//定义断点值的Sass变量$breakpoints:(mobile:375px,tablet:768px,//etc.);//用于写出媒体查询的Sass变量$media:(mobile:'(max-width:#{map-get($breakpoints,mobile)})',tablet:'(max-width:#{map-get($breakpoints,tablet)})',//etc.);//生成Sass变量的导出模块可在JavaScript中访问：export{breakpointMobile:unquote(map-get($media,mobile));breakpointTablet:unquote(map-get($media,tablet));//等}动画是另一个用例。动画的持续时间通常存储在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,});这使得在CSS、Sass和JavaScript之间交换数据变得容易。共享此类变量可使代码简单且不那么冗长。当然，有多种方法可以实现同一件事。LesJames分享了一种有趣的方法，允许Sass和JavaScript通过JSON进行交互。我可能有偏见，但我发现这里介绍的方法是最简单和最直观的。无需疯狂修改您已经使用和正在编写的CSS和JavaScript。
