Generated by SassMeister.com.

input.scss

@mixin custom-scrollbars {
  scrollbar-width: thin;
  scrollbar-color: grey red;

  &::-webkit-scrollbar{
    width: 4px;
  }

  &::-webkit-scrollbar-track{
    background-color: red;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: grey;
    border: 3px solid red;
  }
}

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: grey red;
  height: 2000px;
}

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

body::-webkit-scrollbar-track {
  background-color: red;
}

body::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: grey;
  border: 3px solid red;
}

settings.json

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