JS에서 SCSS 변수 지정하기

Question

그라데이션을 스크롤 이벤트에 의해 트리거 될 때 변경해야하는 배경 이미지 (둘 다 배경 속성) 위에 놓고 싶습니다. (결국에는 넥타이하고 싶습니다. 스크롤에).

저는 각 색상이되고 싶은 그라디언트 비율에 대한 SCSS 변수를 만들었습니다. 내 자바 스크립트로 올바른 속성을 타겟팅 할 수 없습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

필자는 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

당신이이 매우 독특한 셋업 진행 그렇다면 것은, 말씀이 없다면 당신은 (자바 스크립트 말대꾸 이야기 할 수 없다. 우리는 무엇입니까.) Sass가 백엔드에서 CSS로 컴파일되는 동안 JavaScript가 사용자 에이전트 (브라우저)에서 발생하고 브라우저에 전달되는 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; 
} 

그런 다음 자바 스크립트를 적용하고 스크롤 할 때 해당 클래스를 제거하십시오.

Answer 2

KatieK의 접근 방식을 사용하고 제대로, 여기에 최종 코드의 작업 얻을 수있는 몇 가지 다른 변화를 만들어 :

SCSS : (또한 단지 ... 노트를 참조 CSS 될 수 있습니다)

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%; 
} 

.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; 
    background-size: cover; 
    height: 100%; 
} 

JS가 :

$(document).ready(function($) { 
    var scroll_pos = 0; 
     $(document).scroll(function() { 
      scroll_pos = $(this).scrollTop(); 
      if(scroll_pos > 10) { 
       $("body").addClass("scrooll"); 
      } else { 
       $("body").removeClass("scrooll"); 
      } 
     }); 
}); 

Notes : 내 j의 $ (body)는 $ ("body") 여야합니다. 또한 두 클래스를 사용 했으므로 $ percent-bg는 더 이상 필요하지 않습니다. 정규 CSS는 두 번째 rgba 후에 $ percent-bg를 대체하는 비율로 사용할 수 있습니다.