Generated by SassMeister.com.

input.scss

@mixin custom-scrollbars {

  scrollbar-width: thin;
  scrollbar-color: blue orange;


    /* Works on Chrome, Edge, and Safari */
    &::-webkit-scrollbar {
      width: 12px;
    }
    
    &::-webkit-scrollbar-track {
      background: orange;
    }
    
    &::-webkit-scrollbar-thumb {
      background-color: blue;
      border-radius: 20px;
      border: 3px solid orange;
    }
}

body {
    @include custom-scrollbars;
    
    height: 2000px;
}

markup.html

<ul>
    <li class="foo">lorem ipsum</li>
    <li class="foo __bar">lorem ipsum</li>
    <li class="foo __bar baz">lorem ipsum</li>
</ul>

<ul>
    <li class="foo2">lorem ipsum</li>
    <li class="foo2--bar">lorem ipsum</li>
    <li class="foo2 foo2--bar baz2">lorem ipsum</li>
</ul>

output.css

body {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
  /* Works on Chrome, Edge, and Safari */
  height: 2000px;
}

body::-webkit-scrollbar {
  width: 12px;
}

body::-webkit-scrollbar-track {
  background: orange;
}

body::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}

settings.json

{
  "sass": {
    "compiler": "libsass/3.5.5",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}