Script and style attributes working, how can I fix this?

For some reason the style is not being applied and the script isn't either. I think it might have to to with SASS but the JavaScript is also messed up. I don't really have much experience with SASS so any help would be much appreciated. I ran this through a formatter and fixed some stuff it but it didn't seem to work.

Thanks in advance.

<div class="content">
  <div class="wrapper">
    <div class="box" data-scroll-speed="1">L</div>
    <div class="box" data-scroll-speed="2">I</div>
    <div class="box" data-scroll-speed="4">A</div>
    <div class="box" data-scroll-speed="3">M</div>
    <img class="box" data-scroll-speed="2" src="https://i.imgur.com/zKQtu92.png"></img>
    <div class="box" data-scroll-speed="1">V</div>
    <div class="box" data-scroll-speed="3">A</div>
    <div class="box" data-scroll-speed="4">N</div>
    <div class="box" data-scroll-speed="2">C</div>
    <div class="box" data-scroll-speed="4">E</div>
  </div>
</div>

<h2 id="first">Welcome to my art gallery!</h2>
<h2>I hope you enjoy my art!</h2>
<h2>Are you still reading this?</h2>
<h2>Wow... okay.</h2>
<h2>You must really want to see my art.</h2>
<h2>Fine, I'll show it to you.</h2>
<h2 id="last">Here it comes!</h2>
<img id="image" src="https://img.quizlet.com/manuG-700.jpg"></img>

$.fn.moveIt = function() {
  var $window = $(window);
  var instances = [];

  $(this).each(function() {
    instances.push(new moveItItem($(this)));
  });

  window.addEventListener('scroll', function() {
    var scrollTop = $window.scrollTop();
    instances.forEach(function(inst) {
      inst.update(scrollTop);
    });
  }, {
    passive: true
  });
}

var moveItItem = function(el) {
  this.el = $(el);
  this.speed = parseInt(this.el.attr('data-scroll-speed'));
};

moveItItem.prototype.update = function(scrollTop) {
  this.el.css('transform', 'translateY(' + -(scrollTop / this.speed) + 'px)');
};

// Initialization
$(function() {
  $('[data-scroll-speed]').moveIt();
});

@import bourbon

body
  margin: 500px

#image
  display: block
  margin-left: auto
  margin-right: auto
  width: 50%
  box-shadow: 0 0px 10px gray
  margin-bottom: 100px
  border-radius: 10px

html
  user-select: none
  height: 5000px
  font-family: arial, sans-serif

h2
  color: red
  text-align: center
  margin-top: 100vh
  margin-bottom: 100vh
  color: #222
  font-size: 25px

#first
  margin-top: 250vh

.wrapper
  +display(flex)
  +justify-content(center)
  +align-items(center)
  +size(100% 100vh)
  +position(fixed, 0px null null 0px)

.box
  +flex(none)
  +size(100px)
  line-height: 100px
  text-align: center
  font-size: 25px
  color: #fff
  background: #ff8330
  will-change: transform

  &:nth-of-type(1)
    background: #abf263
  &:nth-of-type(2)
    background: #eb4dce
  &:nth-of-type(3)
    background: #33bbff
  &:nth-of-type(4)
    background: #ff4d4d