💋SASS pseudo-class [7:55am]

[frankcollins3]

attempting to do: sass instead of css

error: ::-webkit-scrollbar { width: 10px; height: 5px; padding-top: 50%; }

proposed approach: 1: find a container to which we can attribute this css property. 2: use the same for inline ?

[frankcollins3]

trying: .form::-webkit-scrollbar { [7:59am]

[frankcollins3]

new approach is @mixin which means this issue is turning into a double issue:

here is the code from which the error is produced:

@mixin webkit-scrollbar {
    &::-webkit-scrollbar {
      width: 10px;
      height: 5px;
      padding-top: 50%;
    }
    &::-webkit-scrollbar-track {
        background: #ffffff;
    }

    &::-webkit-scrollbar-thumb {
        background: #dedede70;
    }
    &::-webkit-scrollbar-thumb:hover {
        background: #98ddfc;
    }
    // &::-webkit-scrollbar-button {
    // }

  }

.settingsContainer {
    width: 60%;
    height: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 0 2em;
    @include webkit-scrollbar;
    @include webkit-scrollbar-track;
    @include webkit-scrollbar-thumb;
  }

[8:31am]

[frankcollins3]

👍 @include webkit-scrollbar // only 1 mixin needed: [8:38am]