Generated by SassMeister.com.

input.scss

$fontSize: 20px;
$hexaPurple: #883fff;

p {
    font-size: $fontSize;
    font-family: 'Commissioner', sans-serif;
    color: $hexaPurple;
}












.container {
    position: relative;
    height: 50px;

    > * {
        position: absolute;
        top: 0;
        height: 100%;
        width: 50px;
    }

    @for $i from 1 to 10 {
        :nth-child(#{$i}) {
            left: ($i - 1) * 50px;
            background-color: scale-color(#000000, $lightness: $i * 10%);
        }
    }
}








@mixin themedFakeButton($size, $theme) {
    display: inline-block;
    padding: 10px 20px;
    font-size: $size;
    border-radius: 5px;

    @if $theme == 'light' {
        background-color: #e1e1f0;
        color: #1e1e34;
    } @else {
        color: #e1e1f0;
        background-color: #1e1e34;
    }
}

.light-fake-button {
    @include themedFakeButton($fontSize, 'light');
}

.dark-fake-button {
    @include themedFakeButton($fontSize, 'dark');
}


%fake-button-placeholder {
    display: inline-block;
    padding: 10px 20px;
    font-size: $fontSize;
    border-radius: 5px;
}

.light-fake-button-extend {
    @extend %fake-button-placeholder;
    background-color: #e1e1f0;
    color: #1e1e34;
}

.dark-fake-button-extend {
    @extend %fake-button-placeholder;
    color: #e1e1f0;
    background-color: #1e1e34;
}

markup.html

<p>Here's some text</p>

<div class='container'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

<div style='margin-top: 20px'>
    <span class='light-fake-button'>Light theme</span>
    <span class='dark-fake-button'>Dark theme</span>
</div>

<div style='margin-top: 20px'>
    <p class='light-fake-button-extend'>Light theme</p>
    <p class='dark-fake-button-extend'>Dark theme</p>
</div>

output.css

p {
  font-size: 20px;
  font-family: "Commissioner", sans-serif;
  color: #883fff;
}

.container {
  position: relative;
  height: 50px;
}
.container > * {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50px;
}
.container :nth-child(1) {
  left: 0px;
  background-color: #1a1a1a;
}
.container :nth-child(2) {
  left: 50px;
  background-color: #333333;
}
.container :nth-child(3) {
  left: 100px;
  background-color: #4d4d4d;
}
.container :nth-child(4) {
  left: 150px;
  background-color: #666666;
}
.container :nth-child(5) {
  left: 200px;
  background-color: gray;
}
.container :nth-child(6) {
  left: 250px;
  background-color: #999999;
}
.container :nth-child(7) {
  left: 300px;
  background-color: #b3b3b3;
}
.container :nth-child(8) {
  left: 350px;
  background-color: #cccccc;
}
.container :nth-child(9) {
  left: 400px;
  background-color: #e6e6e6;
}

.light-fake-button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 20px;
  border-radius: 5px;
  background-color: #e1e1f0;
  color: #1e1e34;
}

.dark-fake-button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 20px;
  border-radius: 5px;
  color: #e1e1f0;
  background-color: #1e1e34;
}

.dark-fake-button-extend, .light-fake-button-extend {
  display: inline-block;
  padding: 10px 20px;
  font-size: 20px;
  border-radius: 5px;
}

.light-fake-button-extend {
  background-color: #e1e1f0;
  color: #1e1e34;
}

.dark-fake-button-extend {
  color: #e1e1f0;
  background-color: #1e1e34;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}