The following is a Sass mixin that will allow you to customize the browser's scrollbar.

// @include scrollbars(.5em, foreground, background);
@mixin scrollbar($size, $foreground-colour, $background-colour: mix($foreground-colour, white,  50%)) {
  // For Google Chrome
  ::-webkit-scrollbar {
      width:  $size;
      height: $size;

  ::-webkit-scrollbar-thumb {
      background: $foreground-colour;

  ::-webkit-scrollbar-track {
      background: $background-colour;
  body {
    scrollbar-face-color: $foreground-colour;
    scrollbar-track-color: $background-colour;

All you have to do now is include it in your project using the following code.

@include scrollbars(width, foreground, background);

Where width is the width of your scrollbar, foreground is the foreground colour of your scrollbar and background is the background colour of your scrollbar.

Usage example would be:

@include scrollbar(1.5em, #eee, #000);