How to implement .SCSS on my own website?

I've been experimenting on Codepen just recently and I was wondering how I could implement the code that is displayed on the website on one of my own. I realized that most of the formats used on Codepen aren't pure ".css". I learned it's something new called ".scss". I was wondering where to start and if anybody could help me out in understanding how .scss works. Especially This

body{
  background:black;
  font-family: 'Varela', sans-serif;
}

.glitch{
  color:white;
  font-size:0px;
  position:relative;
  width:268px;
  height:654px;
  margin:0 auto;
  text-indent:-999em;
  background:transparent url(http://ift.tt/1AREnUz) center center no-repeat;
}
@keyframes noise-anim{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip:rect(random(654)+px,9999px,random(654)+px,0);
    }
  }
}
.glitch:after{
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  left:2px;
  top:0;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim 2s infinite linear alternate-reverse;
  background:inherit;
  -webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}

@keyframes noise-anim-2{
  $steps:20;
  @for $i from 0 through $steps{
    #{percentage($i*(1/$steps))}{
      clip:rect(random(100)+px,9999px,random(100)+px,0);
    }
  }
}

.glitch:before{
  content: '';
  width:100%;
  height:100%;
  position:absolute;
  left:-2px;
  top:0;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation:noise-anim-2 3s infinite linear alternate-reverse;
  background:inherit;
  -webkit-filter: hue-rotate(300deg);
  filter: hue-rotate(300deg);
}