How Would I Use @mixin And @include In This Code?

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 a

Solution 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 -10px20px$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), 
                $color40%, 
                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);
}

Solution 2:

remove background-color: #9b0621; from .playButton .button

and add those lines to your css. e.g.

.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