Generated by SassMeister.com.

SassMeister-input-HTML.html

<div id="star-field">
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

$size: 20px;
$starCount:40;

@mixin buildStar($size, $x, $y, $color) {
  top:$x;
  left:$y;
  width: $size;
  height: $size;
  background-color: $color;
  border-radius: $size;
}

html {
  height: 100%;
  body {
    background:
    linear-gradient(to bottom, 
    black 0%,
    lighten(black, 30%) 100%);
    overflow: hidden;
  }
}


#star-field{
  .star{
    position: absolute;
    
  
   
    @for $i from 1 through $starCount{
      &:nth-child(#{$i}){
        $x: random(100);
        $y: random(100);
        $duration: random(10)+1;
        @if $duration < 3{
          @include buildStar($size, $x+%, $y+%, blue);
        } 
        @else if $duration >= 3 and $duration < 6 {
          @include buildStar($size/2, $x+%, $y+%, yellow);
        }
        @else {
          @include buildStar($size/4, $x+%, $y+%, white);
        }
        animation: move+$i $duration+s linear infinite;
          @keyframes move+$i {
            100% {
              left: -$x+px;
            }
          }
      }
    }
  }
}

SassMeister-output.css

html {
  height: 100%;
}

html body {
  background: linear-gradient(to bottom, black 0%, #4d4d4d 100%);
  overflow: hidden;
}

#star-field .star {
  position: absolute;
}

#star-field .star:nth-child(1) {
  top: 29%;
  left: 5%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move1 6s linear infinite;
}

@keyframes move1 {
  100% {
    left: -29px;
  }
}

#star-field .star:nth-child(2) {
  top: 48%;
  left: 43%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move2 8s linear infinite;
}

@keyframes move2 {
  100% {
    left: -48px;
  }
}

#star-field .star:nth-child(3) {
  top: 4%;
  left: 71%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move3 7s linear infinite;
}

@keyframes move3 {
  100% {
    left: -4px;
  }
}

#star-field .star:nth-child(4) {
  top: 32%;
  left: 54%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move4 7s linear infinite;
}

@keyframes move4 {
  100% {
    left: -32px;
  }
}

#star-field .star:nth-child(5) {
  top: 19%;
  left: 15%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move5 6s linear infinite;
}

@keyframes move5 {
  100% {
    left: -19px;
  }
}

#star-field .star:nth-child(6) {
  top: 16%;
  left: 25%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move6 8s linear infinite;
}

@keyframes move6 {
  100% {
    left: -16px;
  }
}

#star-field .star:nth-child(7) {
  top: 80%;
  left: 22%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move7 7s linear infinite;
}

@keyframes move7 {
  100% {
    left: -80px;
  }
}

#star-field .star:nth-child(8) {
  top: 28%;
  left: 41%;
  width: 10px;
  height: 10px;
  background-color: yellow;
  border-radius: 10px;
  animation: move8 3s linear infinite;
}

@keyframes move8 {
  100% {
    left: -28px;
  }
}

#star-field .star:nth-child(9) {
  top: 15%;
  left: 2%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move9 7s linear infinite;
}

@keyframes move9 {
  100% {
    left: -15px;
  }
}

#star-field .star:nth-child(10) {
  top: 74%;
  left: 20%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move10 8s linear infinite;
}

@keyframes move10 {
  100% {
    left: -74px;
  }
}

#star-field .star:nth-child(11) {
  top: 59%;
  left: 35%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move11 8s linear infinite;
}

@keyframes move11 {
  100% {
    left: -59px;
  }
}

#star-field .star:nth-child(12) {
  top: 59%;
  left: 69%;
  width: 10px;
  height: 10px;
  background-color: yellow;
  border-radius: 10px;
  animation: move12 4s linear infinite;
}

@keyframes move12 {
  100% {
    left: -59px;
  }
}

#star-field .star:nth-child(13) {
  top: 42%;
  left: 65%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move13 9s linear infinite;
}

@keyframes move13 {
  100% {
    left: -42px;
  }
}

#star-field .star:nth-child(14) {
  top: 96%;
  left: 54%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move14 10s linear infinite;
}

@keyframes move14 {
  100% {
    left: -96px;
  }
}

#star-field .star:nth-child(15) {
  top: 6%;
  left: 92%;
  width: 20px;
  height: 20px;
  background-color: blue;
  border-radius: 20px;
  animation: move15 2s linear infinite;
}

@keyframes move15 {
  100% {
    left: -6px;
  }
}

#star-field .star:nth-child(16) {
  top: 27%;
  left: 73%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move16 10s linear infinite;
}

@keyframes move16 {
  100% {
    left: -27px;
  }
}

#star-field .star:nth-child(17) {
  top: 74%;
  left: 3%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move17 7s linear infinite;
}

@keyframes move17 {
  100% {
    left: -74px;
  }
}

#star-field .star:nth-child(18) {
  top: 48%;
  left: 41%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move18 9s linear infinite;
}

@keyframes move18 {
  100% {
    left: -48px;
  }
}

#star-field .star:nth-child(19) {
  top: 26%;
  left: 47%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move19 10s linear infinite;
}

@keyframes move19 {
  100% {
    left: -26px;
  }
}

#star-field .star:nth-child(20) {
  top: 13%;
  left: 88%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move20 7s linear infinite;
}

@keyframes move20 {
  100% {
    left: -13px;
  }
}

#star-field .star:nth-child(21) {
  top: 41%;
  left: 99%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move21 9s linear infinite;
}

@keyframes move21 {
  100% {
    left: -41px;
  }
}

#star-field .star:nth-child(22) {
  top: 56%;
  left: 31%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move22 11s linear infinite;
}

@keyframes move22 {
  100% {
    left: -56px;
  }
}

#star-field .star:nth-child(23) {
  top: 80%;
  left: 70%;
  width: 10px;
  height: 10px;
  background-color: yellow;
  border-radius: 10px;
  animation: move23 4s linear infinite;
}

@keyframes move23 {
  100% {
    left: -80px;
  }
}

#star-field .star:nth-child(24) {
  top: 92%;
  left: 65%;
  width: 20px;
  height: 20px;
  background-color: blue;
  border-radius: 20px;
  animation: move24 2s linear infinite;
}

@keyframes move24 {
  100% {
    left: -92px;
  }
}

#star-field .star:nth-child(25) {
  top: 73%;
  left: 70%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move25 9s linear infinite;
}

@keyframes move25 {
  100% {
    left: -73px;
  }
}

#star-field .star:nth-child(26) {
  top: 96%;
  left: 80%;
  width: 10px;
  height: 10px;
  background-color: yellow;
  border-radius: 10px;
  animation: move26 4s linear infinite;
}

@keyframes move26 {
  100% {
    left: -96px;
  }
}

#star-field .star:nth-child(27) {
  top: 85%;
  left: 19%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move27 10s linear infinite;
}

@keyframes move27 {
  100% {
    left: -85px;
  }
}

#star-field .star:nth-child(28) {
  top: 65%;
  left: 49%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move28 10s linear infinite;
}

@keyframes move28 {
  100% {
    left: -65px;
  }
}

#star-field .star:nth-child(29) {
  top: 62%;
  left: 75%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move29 10s linear infinite;
}

@keyframes move29 {
  100% {
    left: -62px;
  }
}

#star-field .star:nth-child(30) {
  top: 92%;
  left: 76%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move30 8s linear infinite;
}

@keyframes move30 {
  100% {
    left: -92px;
  }
}

#star-field .star:nth-child(31) {
  top: 40%;
  left: 26%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move31 11s linear infinite;
}

@keyframes move31 {
  100% {
    left: -40px;
  }
}

#star-field .star:nth-child(32) {
  top: 36%;
  left: 5%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move32 7s linear infinite;
}

@keyframes move32 {
  100% {
    left: -36px;
  }
}

#star-field .star:nth-child(33) {
  top: 97%;
  left: 13%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move33 10s linear infinite;
}

@keyframes move33 {
  100% {
    left: -97px;
  }
}

#star-field .star:nth-child(34) {
  top: 44%;
  left: 39%;
  width: 10px;
  height: 10px;
  background-color: yellow;
  border-radius: 10px;
  animation: move34 3s linear infinite;
}

@keyframes move34 {
  100% {
    left: -44px;
  }
}

#star-field .star:nth-child(35) {
  top: 73%;
  left: 20%;
  width: 10px;
  height: 10px;
  background-color: yellow;
  border-radius: 10px;
  animation: move35 3s linear infinite;
}

@keyframes move35 {
  100% {
    left: -73px;
  }
}

#star-field .star:nth-child(36) {
  top: 34%;
  left: 48%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move36 10s linear infinite;
}

@keyframes move36 {
  100% {
    left: -34px;
  }
}

#star-field .star:nth-child(37) {
  top: 12%;
  left: 4%;
  width: 10px;
  height: 10px;
  background-color: yellow;
  border-radius: 10px;
  animation: move37 4s linear infinite;
}

@keyframes move37 {
  100% {
    left: -12px;
  }
}

#star-field .star:nth-child(38) {
  top: 47%;
  left: 68%;
  width: 10px;
  height: 10px;
  background-color: yellow;
  border-radius: 10px;
  animation: move38 4s linear infinite;
}

@keyframes move38 {
  100% {
    left: -47px;
  }
}

#star-field .star:nth-child(39) {
  top: 90%;
  left: 83%;
  width: 10px;
  height: 10px;
  background-color: yellow;
  border-radius: 10px;
  animation: move39 3s linear infinite;
}

@keyframes move39 {
  100% {
    left: -90px;
  }
}

#star-field .star:nth-child(40) {
  top: 18%;
  left: 99%;
  width: 5px;
  height: 5px;
  background-color: white;
  border-radius: 5px;
  animation: move40 9s linear infinite;
}

@keyframes move40 {
  100% {
    left: -18px;
  }
}

SassMeister-rendered.html

<div id="star-field">
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
</div>