How would I use @mixin and @include in this code?

Question

The code uses SCSS.

How would I do that in the code?

https://jsfiddle.net/f9h1wu75/

What I am trying to do is be able to set a color for each button.

Right now all of the buttons are one color, how would I be able to give each button a different color?

It's not blue in the snippet because stackoverflow doesn't support SCSS.

I was told to use @mixin and @include but I am not familiar with SCSS.

(function iife() {
  "use strict";

  function getButtonContainer(el) {
    while (el.classList.contains("playButton") === false) {
      el = el.parentNode;
    }
    return el;
  }

  function getPlay(button) {
    return button;
  }

  function showPlayButton(button) {
    button.classList.remove("active");
  }

  function isPlaying(button) {
    const play = getPlay(button);
    return play.classList.contains("active");
  }

  function pauseAllButtons() {
    var buttons = document.querySelectorAll(".playButton");
    buttons.forEach(function hidePause(buttons) {
      if (isPlaying(buttons)) {
        showPlayButton(buttons);
      }
    });
  }

  function showPauseButton(button) {
    pauseAllButtons();
    button.classList.add("active");
  }

  function getAudio() {
    return document.querySelector("audio");
  }

  function playAudio(player, src) {
    player.volume = 1.0;
    if (player.getAttribute("src") !== src) {
      player.setAttribute("src", src);
    }
    player.play();
  }

  function showButton(button, opts) {
    if (opts.playing) {
      showPlayButton(button);
    } else {
      showPauseButton(button);
    }
  }

  function pauseAudio(player) {
    player.pause();
  }

  function manageAudio(player, opts) {
    if (opts.playing) {
      pauseAudio(player);
    } else {
      playAudio(player, opts.src);
    }
  }

  function playButton(button) {
    const player = getAudio();
    const playing = isPlaying(button);
    showButton(button, {
      playing
    });
    manageAudio(player, {
      playing,
      src: button.getAttribute("data-audio")
    });
  }

  function playButtonClickHandler(evt) {
    const button = getButtonContainer(evt.target);
    playButton(button);
  }

  const playButtons = document.querySelectorAll(".button");
  playButtons.forEach(function addHandler(el) {
    el.addEventListener("click", playButtonClickHandler);
  });
}());

$color: #ff1818;

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

.wrap {
  position: relative;
  width: 582px;
  height: 717px;
}

.playButton {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 150px;
  height: 195px;
  background-color: black;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
}

.playButton.active .button {
  transform: translateZ(20px) rotateX(25deg);
   box-shadow: 0 -10px 20px $color;
}

.playButton.active .button .light {
  animation: flicker 0.2s infinite 0.3s;
}

.playButton.active .button .shine {
  opacity: 1;
}

.playButton.active .button .shadow {
  opacity: 0;
}

.playButton .button {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  transform-origin: center center -20px;
  transform: translateZ(20px) rotateX(-25deg);
  transform-style: preserve-3d;
  background-color: #9b0621;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
    background: linear-gradient(darken($color, 25%) 0%, darken($color, 33%) 30%, darken($color, 33%) 70%, darken($color, 25%) 100%);
    background-repeat: no-repeat;

}


.playButton .button::before {
  content: "";
        background: linear-gradient(rgba(white, 0.8) 10%, rgba(white, 0.3) 30%, darken($color, 35%) 75%, darken($color, 45%)) 50% 50% / 97% 97%, darken($color, 20%);
  background-repeat: no-repeat;
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: rotateX(-90deg);
  position: absolute;
  top: 0;
}

.playButton .button::after {
  content: "";
           background-image: linear-gradient(darken($color, 35%), darken($color, 45%));
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: translateY(50px) rotateX(-90deg);
  position: absolute;
  bottom: 0;
  box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);
}

.playButton .light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
 background-image: radial-gradient(adjust-hue(lighten($color, 20%), 35), $color 40%, transparent 70%);
}

.playButton .dots {
  position: absolute;
  width: 100%;
  height: 100%;
      background-image: radial-gradient(transparent 30%, rgba(darken($color, 35%), 0.7) 70%);
  background-size: 10px 10px;
}

.playButton .characters {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
  background-repeat: no-repeat;
}

.playButton .shine {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 0.3;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
  background-repeat: no-repeat;
}

.playButton .shadow {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
  background-repeat: no-repeat;
}

@keyframes flicker {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 0.8;
  }

  100% {
    opacity: 1;
  }
}

@keyframes light-off {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 0;
  }
}

  <audio></audio>


  <div class="outer">
    <div class="tcell">

      <div class="wrap">

        <div class="playButton" style="margin:2px 2px;" data-audio="http://getradio.me/svoefm">
          <div class="button">
            <div class="light"></div>
            <div class="dots"></div>
            <div class="characters"></div>
            <div class="shine"></div>
            <div class="shadow"></div>
          </div>
        </div>

        <div class="playButton" style="margin: 2px 2px 0 196px;" data-audio="ttp:/fm1.hostingradio.ru:14536/rock90.mp3">
          <div class="button">
            <div class="light"></div>
            <div class="dots"></div>
            <div class="characters"></div>
            <div class="shine"></div>
            <div class="shadow"></div>
          </div>
        </div>

        <div class="playButton" style="margin: 2px 0 0 390px;" data-audio="http:/fm1.hostingradio.ru:14536/rock90.mp3">
          <div class="button">
            <div class="light"></div>
            <div class="dots"></div>
            <div class="characters"></div>
            <div class="shine"></div>
            <div class="shadow"></div>
          </div>
        </div>



        <div class="playButton" style="margin:241px 0 0 2px;" data-audio="http:/fm1.hostingradio.ru:14536/rock90.mp3">
          <div class="button">
            <div class="light"></div>
            <div class="dots"></div>
            <div class="characters"></div>
            <div class="shine"></div>
            <div class="shadow"></div>
          </div>
        </div>

        <div class="playButton" style="margin:241px 0 0 196px;" data-audio="http:/fm1.hostingradio.ru:14536/rock90.mp3">
          <div class="button">
            <div class="light"></div>
            <div class="dots"></div>
            <div class="characters"></div>
            <div class="shine"></div>
            <div class="shadow"></div>
          </div>
        </div>


        <div class="playButton" style="margin:241px 0 0 390px;" data-audio="http:/fm1.hostingradio.ru:14536/rock90.mp3">
          <div class="button">
            <div class="light"></div>
            <div class="dots"></div>
            <div class="characters"></div>
            <div class="shine"></div>
            <div class="shadow"></div>
          </div>
        </div>

        <div class="playButton" style="margin:480px 2px 0;" data-audio="http:/fm1.hostingradio.ru:14536/rock90.mp3">
          <div class="button">
            <div class="light"></div>
            <div class="dots"></div>
            <div class="characters"></div>
            <div class="shine"></div>
            <div class="shadow"></div>
          </div>
        </div>

        <div class="playButton" style="margin:480px 2px 0 196px;" data-audio="http:/fm1.hostingradio.ru:14536/rock90.mp3">
          <div class="button">
            <div class="light"></div>
            <div class="dots"></div>
            <div class="characters"></div>
            <div class="shine"></div>
            <div class="shadow"></div>
          </div>
        </div>


        <div class="playButton" style="margin:480px 2px 0 390px;" data-audio="http:/fm1.hostingradio.ru:14536/rock90.mp3">
          <div class="button">
            <div class="light"></div>
            <div class="dots"></div>
            <div class="characters"></div>
            <div class="shine"></div>
            <div class="shadow"></div>
          </div>
        </div>

      </div>
    </div>
  </div>

Answer 1

The easiest way to do this is to create a variation mixin that targets the properties containing the $color variable. Then include the mixin in a added variation class to each button or as done here use the nth selector to target individual buttons (btw you you have one button too many ;-)

Example on codepen: https://codepen.io/jakob-e/pen/ZEKZMdy

// ––––––––––––––––––––––––––––––––––
// Play Button Variation Mixin
// ––––––––––––––––––––––––––––––––––
@mixin play-button-variation($color: white){
    &.active .button { box-shadow: 0 -10px 20px $color; }
    .button {
        background-image: linear-gradient(
            darken($color, 25%) 0%, 
            darken($color, 33%) 30%, 
            darken($color, 33%) 70%, 
            darken($color, 25%) 100% 
        );

        &::before { 
            background: 
                linear-gradient(
                    rgba(white, 0.8) 10%, 
                    rgba(white, 0.3) 30%, 
                    darken($color, 35%) 75%, 
                    darken($color, 45%)
                ) 50% 50% / 100% 100%, 
    
                // light top line in safari
                // 50% 50% / 97% 97%,    
    
               darken($color, 20%); 
        }

        &::after { 
            background-image: linear-gradient(
                darken($color, 35%), 
                darken($color, 45%)
            );
        }
        .light { 
            background-image: radial-gradient(
                adjust-hue(lighten($color, 20%), 35), 
                $color 40%, 
                transparent 70%
            ); 
        }
        .dots { 
            background-image: radial-gradient(
                transparent 30%, 
                rgba(darken($color, 35%), 0.7) 70%
            ); 
        }
    }
}




// ––––––––––––––––––––––––––––––––––
// Include Play Button Variations
// ––––––––––––––––––––––––––––––––––
.playButton:nth-of-type(1) {
    @include play-button-variation(orangered);
}
.playButton:nth-of-type(2) {
    @include play-button-variation(orange);
}
.playButton:nth-of-type(3) {
    @include play-button-variation(gold);
}
.playButton:nth-of-type(4) {
    @include play-button-variation(blue);
}
.playButton:nth-of-type(5) {
    @include play-button-variation(dodgerblue);
}
.playButton:nth-of-type(6) {
    @include play-button-variation(skyblue);
}
.playButton:nth-of-type(7) {
    @include play-button-variation(forestgreen);
}
.playButton:nth-of-type(8) {
    @include play-button-variation(yellowgreen);
}
.playButton:nth-of-type(9) {
    @include play-button-variation(darkseagreen);
}