javascript - 在 JS 中定位 SCSS 变量

Question

我希望在背景图像上放置的渐变(两者都是背景属性)在由滚动事件触发时发生变化(对于初学者......最终我想将其绑定(bind)到滚动)。

我已经为我想要的每种颜色的渐变百分比创建了一个 SCSS 变量。我似乎无法使用我的 javascript 定位正确的属性。我做错了什么？

我已在 SCSS 文件中手动进行了更改，并确认该变量和 95% 属性均正常工作。

提前谢谢您!

SCSS:

body { 
    $percent-bg: 15%;
  background:  
    linear-gradient(
        to right,
        rgba(242, 63, 117, 0.45), 
        rgba(63, 242, 188, 0.45) $percent-bg
      ),
    url(http://media.giphy.com/media/5a6IkssTZRI08/giphy.gif) no-repeat center center fixed; 
  background-size: cover;
  height: 100%;
}

JS:

var scroll_pos = 0;
        $(document).scroll(function() { 
            scroll_pos = $(this).scrollTop();
            if(scroll_pos > 10) {
                $(body).css('$percent-bg', '95%');
            } else {
                $(body).css('$percent-bg', '15%');
            }
        });

Answer 1

您无法使用 JavaScript 与 Sass 对话(除非您正在进行非常独特的设置。如果是这样，请告诉我们它是什么。)因为 JavaScript 发生在用户代理中(浏览器)，而 Sass 在后端编译成 CSS，然后将 CSS 传递给浏览器。

这可能是最好的方法。首先，在 Sass 中创建一个包含所需样式的新类。例如:

body.scrooll { 
  $percent-bg: 95%;
  background:  
    linear-gradient(
        to right,
        rgba(242, 63, 117, 0.45), 
        rgba(63, 242, 188, 0.45) $percent-bg
      ),
    url(http://media.giphy.com/media/5a6IkssTZRI08/giphy.gif) no-repeat center center fixed; 
}

然后使用 JavaScript 应用并在滚动时删除该类。