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

Posted 2023-03-07

【中文标题】我将如何在这段代码中使用@mixin 和@include？

【英文标题】：How would I use @mixin and @include in this code?

【发布时间】：2021-10-17 20:28:42

【问题描述】：

代码使用 SCSS。

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

https://jsfiddle.net/f9h1wu75/

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

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

在 sn-p 中它不是蓝色的，因为 *** 不支持 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>

【问题讨论】：

你可以给每个按钮一个ID或者使用nth-child

给每个按钮一个 id 会怎样？

你能让它在代码中工作吗？你能提供一个它工作的jsfiddle吗？我无法让它工作。

【参考方案1】：

最简单的方法是创建一个变体 mixin，以包含 $color 变量的属性为目标。然后将 mixin 包含在每个按钮的添加变体类中，或者像这里所做的那样使用第 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);

【讨论】：

左边是原始代码：/// 右边是您的代码：i.imgur.com/y5LgVNS.png 必须修复和调整什么以使您的代码看起来与原始代码相同？你能对代码进行调整吗？

您只需在原始代码下方添加变体 mixin - 我只是对其进行了一些更改，以便更容易找到 $color 变量的使用位置。顶部的 $color 用于提供默认值:)

在我提供的图片中：i.imgur.com/KAQPbcU.png 当它打开时，应该有一个盒子阴影和一个颜色。在第二张图像关闭时，那里不应该有一条水平线。你能在你的代码中修复这些吗？

那条水平线还在，底部的颜色应该和播放器匹配，但事实并非如此。

最后一件事：您的代码在顶部，原始代码在底部。 i.imgur.com/ZqBRCPK.png 那条水平线是怎么去掉的，它不应该在那里。你明白我指的是什么吗？这是如何解决的？

【参考方案2】：

从.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

【讨论】：

你能让它在代码中工作吗？你能提供一个工作的jsfiddle吗？我无法让它工作。

我一定是做错了什么，我不明白为什么它不起作用。

你能让它在代码中工作吗？