'Can't figure out where to put curly bracket and other errors?

I'm trying to add a simple scroll down icon animation from this website, https://codepen.io/TKS31/pen/gOaKaxx to my project but I'm getting an error

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


  .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);
    }
  }

The problem is coming from somewhere here because as soon as I delete this part, the problem goes away. Still new to all of this. It works on the website but not on my project.

csswebkitcss-animationscss-transitionscss-transforms


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions