无法弄清楚将大括号放在哪里以及其他错误？

Question

我正在尝试从该网站添加一个简单的向下滚动图标动画， https://codepen.io/TKS31/pen/gOaKaxx 到我的项目，但我收到错误。

10 problems
} expected css(css-rcurlyexpected) x1
{ expected css(css-rcurlyexpected) x8
at-rule or selector expected css(css-ruleorselectorexpected)

CSS：

  .scroll {
    width: 60px;
    height: 60px;
    border: 2px solid #333;
    border-radius: 50%;
    position: relative;
    animation: down 1.5s infinite;
    -webkit-animation: down 1.5s infinite;
    &::before {
      content: '';
      position: absolute;
      top: 15px;
      left: 18px;
      width: 18px;
      height: 18px;
      border-left: 2px solid red;
      border-bottom: 2px solid red;
      transform: rotate(-45deg);
    }
  }

问题来自这里的某个地方，因为一旦我删除这部分，问题就消失了。对于这一切还是新鲜事。它可以在网站上运行，但不能在我的项目上运行。