我将如何在此代码中使用@mixin 和@include？

Question

代码使用 SCSS。

我该如何在代码中做到这一点？

我想要做的是能够为每个按钮设置颜色。

现在所有的按钮都是一种颜色，我怎样才能给每个按钮一个不同的颜色？

它在代码片段中不是蓝色的，因为 Whosebug 不支持 SCSS。

有人告诉我使用 @mixin 和 @include 但我不熟悉 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

从 .playButton .button

中删除 background-color: #9b0621;

并将这些行添加到您的 css。例如

.playButton:first-child .button{
  background-color: #9b0621;
}
.playButton:nth-child(2) .button{
  background-color: #094699;
}
.playButton:nth-child(3) .button{
  background-color: #78980a;
}

learn more here

Answer 2

最简单的方法是创建一个针对包含 $color 变量的属性的变体混合。然后将 mixin 添加到每个按钮的附加变体 class 中，或者像这里所做的那样使用第 n 个选择器来定位单个按钮（顺便说一句，你有一个按钮太多了；-）

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);
}

我将如何在此代码中使用@mixin 和@include？

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

html

css

sass

scss-mixins