javascript - Targeting SCSS variables in JS -

javascript - Targeting SCSS variables in JS -

i'd gradient i've set on background image (both background properties) alter when triggered scroll event (for starters... i'd tie scroll).

i've created scss variable percentage of gradient want each color. can't seem target right property javascript. doing wrong?

i've made alter manually in scss file , confirmed variable , 95% property both work properly.

thank in advance!

scss:

body { $percent-bg: 15%; background: linear-gradient( 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%'); } });

you can't talk sass javascript (unless have very unique set-up going on. if so, tell is.) because javascript occurs in user agent (browser) while sass compiled in end css, , it's css delivered browser.

this best way it. first, create new class in sass contains styling want. ex:

body.scrooll { $percent-bg: 95%; background: linear-gradient( 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; }

then utilize javascript apply , remove class on scroll.

javascript jquery scroll sass gradient