Generated by SassMeister.com.

input.scss

/* Variables and Style Rules */

$fontSize: 1.1em;
$hexaPurple: #883fff;
$hexaBlue: #1bb4ff;
$hexaAqua: #00eaf6;
$hexaGreen: #009490;
$hexaRed: #e32553;

h1 {
    color: $hexaPurple;
    font: {
        size: $fontSize * 2.5;
        family: 'Commissioner', sans-serif;
    }
    margin-bottom: 1em;
}








/* Parent Selector: & */

.inner-hover {
    height: 10em;
    width: 10em;
    margin: 0 auto;
    background: $hexaBlue;

   
    *:hover > & {
        background: $hexaGreen;
    }
     
    &:hover {
        background: $hexaAqua;
    }
    
    [dir='rtl'] & {
        background: $hexaRed;
    }
    
    
    
    
    
    &_hidden {
        display: none;
    }
}









/* ??? */

%fake-button-placeholder {
    display: inline-block;
    padding: 0.5em 1em;
    font-size: $fontSize * 1.1;
    border-radius: 5px;
}

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

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






/* ??? */

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

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

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

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









/* A programming language? */

.container {
    position: relative;
    height: 50px;
    margin: 3em 0;

    > * {
        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%);
        }
    }
}

markup.html

<div dir='ltr'>
<h1>Hello Engineering Huddle 👋</h1>

<div style='border: 1px solid; width: 30em;'>
    <div class='inner-hover'></div>
    <div class='inner-hover inner-hover_hidden'></div>
</div>

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

<div style='margin-top: 3em'>
    <span class='light-fake-button-again'>Light theme (again)</span>
    <span class='dark-fake-button-again'>Dark theme (again)</span>
</div>

<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>

output.css

/* Variables and Style Rules */
h1 {
  color: #883fff;
  font-size: 2.75em;
  font-family: "Commissioner", sans-serif;
  margin-bottom: 1em;
}

/* Parent Selector: & */
.inner-hover {
  height: 10em;
  width: 10em;
  margin: 0 auto;
  background: #1bb4ff;
}
*:hover > .inner-hover {
  background: #009490;
}
.inner-hover:hover {
  background: #00eaf6;
}
[dir=rtl] .inner-hover {
  background: #e32553;
}
.inner-hover_hidden {
  display: none;
}

/* ??? */
.dark-fake-button, .light-fake-button {
  display: inline-block;
  padding: 0.5em 1em;
  font-size: 1.21em;
  border-radius: 5px;
}

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

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

/* ??? */
.light-fake-button-again {
  display: inline-block;
  padding: 0.5em 1em;
  font-size: 1.21em;
  border-radius: 5px;
  background-color: #e1e1f0;
  color: #1e1e34;
}

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

/* A programming language? */
.container {
  position: relative;
  height: 50px;
  margin: 3em 0;
}
.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;
}

settings.json

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