html - 我将如何在这段代码中使用@mixin 和@include?
问题描述
该代码使用 SCSS。
我将如何在代码中做到这一点?
https://jsfiddle.net/f9h1wu75/
我想要做的是能够为每个按钮设置颜色。
现在所有的按钮都是一种颜色,我怎么能给每个按钮一个不同的颜色呢?
它在代码段中不是蓝色的,因为 stackoverflow 不支持 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>
解决方案
从background-color: #9b0621;
_.playButton .button
并将这些行添加到您的 CSS 中。例如
.playButton:first-child .button{
background-color: #9b0621;
}
.playButton:nth-child(2) .button{
background-color: #094699;
}
.playButton:nth-child(3) .button{
background-color: #78980a;
}
推荐阅读
- android - 如何使用expo限制平板电脑/手机的android应用程序?
- meteor - 如何使用 Meteor 和 React 一致地确定用户名
- python - insert_many 或 insert_one 在 PyMongo 的 MongoDB 中不起作用
- node.js - 有没有办法对关键代码进行模糊搜索?
- python - Sqlite DB 中的多线程
- java - 使用 Lombok 在构造函数中设置所有值的最小化版本,而不是使用额外的 setter 向下转换
- security - SSL 证书是保护“网络”还是“仅”保护数据?
- android - 带有 popBackStack 事务的偏好片段
- python - 使用非 Python 文件(例如 DLL、.c、.cpp)构建 Python 项目的最佳实践?
- c# - 如何在 .net core 3.1 应用程序中访问 W3C TraceContext 标头?