Why isn't my scss code appearing when I run my code. I linked it to my html file?

Why isn't my scss code appearing when I run my code? I linked it to my html file in this format <link href="styles.scss" rel="stylesheet"/>.

/* dynamic pyramid image, code of my scss file below */

/* dynamic pyramid image */

$color: #00b4ff;
$speed: 5;

.container {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  position: relative;
  perspective: 300px;
  perspective-origin: 50% 40%;
}

.side {
  position: absolute;
  left: 140px;
  top: 150px;
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 120px solid #ccc;
  transform-origin: 50% 0%;
  animation: spin $speed + s infinite linear;
}

.back {
  animation-delay: -($speed/2) + s;
}

.right {
  animation-delay: -($speed/4) + s;
}

.left {
  animation-delay: -($speed * 0.75) + s;
}

@keyframes spin {
  0% {
    transform: rotateY(0deg) rotateX(30deg);
    border-bottom-color: lighten($color, 5%);
  }

  25% {
    transform: rotateY(90deg) rotateX(30deg);
    border-bottom-color: darken($color, 5%);
    opacity: 1;
  }

  25.1% {
    opacity: 0;
  }

  50% {
    transform: rotateY(180deg) rotateX(30deg);
    border-bottom-color: darken($color, 12%);
  }

  74.9% {
    opacity: 0;
  }

  75% {
    transform: rotateY(270deg) rotateX(30deg);
    border-bottom-color: darken($color, 15%);
    opacity: 1;
  }

  100% {
    transform: rotateY(360deg) rotateX(30deg);
    border-bottom-color: lighten($color, 5%);
  }
}

.shadow {
  position: absolute;
  top: 300px;
  left: 175px;
  width: 50px;
  height: 50px;
  background-color: #bbb;
  box-shadow: 0 0 40px 40px #bbb;
  animation: shadow $speed + s infinite linear;
}

@keyframes shadow {
  0% {
    transform: rotateX(90deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(90deg) rotateZ(-360deg);
  }
}