Generated by SassMeister.com.

input.scss

$unit: 6px; /*scalable*/
$ship-axis: 16; /*for humans*/

/*colors*/
$teal: teal;
$orange: orange;
$yellow: yellow;
$blue: blue;
$purple: magenta; //i kno wtf
$pink: purple;    //lol
$white: white;
$red: red; 
$gray: lightgray;
$turquoise: turquoise;

/*draws the galaga grid, corrects for odd width*/
@mixin galaga-grid($x-axis, $y-axis) {
    $size-grid: null;
    $position-grid: null;
    $zero-start: $x-axis - 1;
    @for $i from 0 through $zero-start {
        $size-grid:append($size-grid, $unit 100%, comma);
        $position-grid:append($position-grid, $unit * $i 0, comma);
    }
    background-size: $size-grid;
    background-position: $position-grid;
    background-repeat: no-repeat;
    height: $unit * $y-axis;
    width: $unit * $zero-start;
}

/*open/closed galagas for animation*/
@mixin galaga-open($color1, $color2, $color3) {
   background-image: linear-gradient(transparent $unit * 7, $color1 $unit * 7 $unit * 8, transparent $unit * 8 $unit * 10, $color1 $unit * 10 $unit * 15, transparent $unit * 15 $unit * 16),   
    linear-gradient(transparent $unit * 7, $color1 $unit * 7 $unit * 11, $color2 $unit * 11 $unit * 14, $color1 $unit * 14 $unit * 16),
    linear-gradient(transparent $unit * 6, $color1 $unit * 6 $unit * 9, $color2 $unit * 9 $unit * 11, $color1 $unit * 11 $unit * 12, $color2 $unit * 12 $unit * 14, $color1 $unit * 14 $unit * 16),
    linear-gradient(transparent $unit * 2, $color1 $unit * 2 $unit * 3, transparent $unit * 3 $unit * 6, $color1 $unit * 6 $unit * 15, transparent $unit * 15 $unit * 16),
    linear-gradient(transparent $unit * 2, $color1 $unit * 2 $unit * 4, transparent $unit * 4 $unit * 5, $color1 $unit * 5 $unit * 10, transparent $unit * 10 $unit * 16),
    linear-gradient(transparent $unit * 2, $color2 $unit * 2 $unit * 4, $color1 $unit * 4 $unit * 5, $color3 $unit * 5 $unit * 9, transparent $unit * 9 $unit * 16),
    linear-gradient($color1 0 $unit * 2, $color2 $unit * 2 $unit * 4, $color1 $unit * 4 $unit * 5, $color3 $unit * 5 $unit * 9, $color2 $unit * 9 $unit * 11, transparent $unit * 11 $unit * 16),
    linear-gradient(transparent 0 $unit * 2, $color1 $unit * 2 $unit * 6, $color3 $unit $unit * 9, transparent $unit * 9 $unit * 16),
    linear-gradient($color1 0 $unit * 2, $color2 $unit * 2 $unit * 4, $color1 $unit * 4 $unit * 5, $color3 $unit * 5 $unit * 9, $color2 $unit * 9 $unit * 11, transparent $unit * 11 $unit * 16),
    linear-gradient(transparent $unit * 2, $color2 $unit * 2 $unit * 4, $color1 $unit * 4 $unit * 5, $color3 $unit * 5 $unit * 9, transparent $unit * 9 $unit * 16),
    linear-gradient(transparent $unit * 2, $color1 $unit * 2 $unit * 4, transparent $unit * 4 $unit * 5, $color1 $unit * 5 $unit * 10, transparent $unit * 10 $unit * 16),
    linear-gradient(transparent $unit * 2, $color1 $unit * 2 $unit * 3, transparent $unit * 3 $unit * 6, $color1 $unit * 6 $unit * 15, transparent $unit * 15 $unit * 16),
    linear-gradient(transparent $unit * 6, $color1 $unit * 6 $unit * 9, $color2 $unit * 9 $unit * 11, $color1 $unit * 11 $unit * 12, $color2 $unit * 12 $unit * 14, $color1 $unit * 14 $unit * 16),
    linear-gradient(transparent $unit * 7, $color1 $unit * 7 $unit * 11, $color2 $unit * 11 $unit * 14, $color1 $unit * 14 $unit * 16),
    linear-gradient(transparent $unit * 7, $color1 $unit * 7 $unit * 8, transparent $unit * 8 $unit * 10, $color1 $unit * 10 $unit * 15, transparent $unit * 15 $unit * 16);

}

/*the tractor beam*/

/*styling body is debatably cheating, but it looks better this way*/

/*the single HTML element*/
#galaga {
  @include galaga-grid($ship-axis, $ship-axis);
  @include galaga-open($blue, $purple, $pink);
  display: block;
  position: absolute;
}

output.css

/*scalable*/
/*for humans*/
/*colors*/
/*draws the galaga grid, corrects for odd width*/
/*open/closed galagas for animation*/
/*the tractor beam*/
/*styling body is debatably cheating, but it looks better this way*/
/*the single HTML element*/
#galaga {
  background-size: 6px 100%, 6px 100%, 6px 100%, 6px 100%, 6px 100%, 6px 100%, 6px 100%, 6px 100%, 6px 100%, 6px 100%, 6px 100%, 6px 100%, 6px 100%, 6px 100%, 6px 100%, 6px 100%;
  background-position: 0px 0, 6px 0, 12px 0, 18px 0, 24px 0, 30px 0, 36px 0, 42px 0, 48px 0, 54px 0, 60px 0, 66px 0, 72px 0, 78px 0, 84px 0, 90px 0;
  background-repeat: no-repeat;
  height: 96px;
  width: 90px;
  background-image: linear-gradient(transparent 42px, blue 42px 48px, transparent 48px 60px, blue 60px 90px, transparent 90px 96px), linear-gradient(transparent 42px, blue 42px 66px, magenta 66px 84px, blue 84px 96px), linear-gradient(transparent 36px, blue 36px 54px, magenta 54px 66px, blue 66px 72px, magenta 72px 84px, blue 84px 96px), linear-gradient(transparent 12px, blue 12px 18px, transparent 18px 36px, blue 36px 90px, transparent 90px 96px), linear-gradient(transparent 12px, blue 12px 24px, transparent 24px 30px, blue 30px 60px, transparent 60px 96px), linear-gradient(transparent 12px, magenta 12px 24px, blue 24px 30px, purple 30px 54px, transparent 54px 96px), linear-gradient(blue 0 12px, magenta 12px 24px, blue 24px 30px, purple 30px 54px, magenta 54px 66px, transparent 66px 96px), linear-gradient(transparent 0 12px, blue 12px 36px, purple 6px 54px, transparent 54px 96px), linear-gradient(blue 0 12px, magenta 12px 24px, blue 24px 30px, purple 30px 54px, magenta 54px 66px, transparent 66px 96px), linear-gradient(transparent 12px, magenta 12px 24px, blue 24px 30px, purple 30px 54px, transparent 54px 96px), linear-gradient(transparent 12px, blue 12px 24px, transparent 24px 30px, blue 30px 60px, transparent 60px 96px), linear-gradient(transparent 12px, blue 12px 18px, transparent 18px 36px, blue 36px 90px, transparent 90px 96px), linear-gradient(transparent 36px, blue 36px 54px, magenta 54px 66px, blue 66px 72px, magenta 72px 84px, blue 84px 96px), linear-gradient(transparent 42px, blue 42px 66px, magenta 66px 84px, blue 84px 96px), linear-gradient(transparent 42px, blue 42px 48px, transparent 48px 60px, blue 60px 90px, transparent 90px 96px);
  display: block;
  position: absolute;
}

settings.json

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