im正在制作一个计算器应用程序，并试图为"；主要"；。所以基本上我用JS做了一个工作脚本，它允许我在几个"；主"；类(取决于我点击的颜色主题(。不幸的是，它看不到类内的变量"；。深色"；(可能还有其他一些(。当我把它们放在全局范围内时，它显然有效，但不在主题类内。主题被放置在附加的scss文件中。我可能犯了一个愚蠢的错误，但我想不通。目前，我将变量留在全局范围内，以使其工作。
现场：https://adrian397.github.io/frontEndMentorChallenges/calculator-app-main/index.html
SCSS FILE
@use './themes' as *;
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Spartan", sans-serif;
}
main {
background: $mainBackground;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: $default;
}
.calc-container {
min-height: 55vh;
width: 28%;
header {
display: flex;
min-height: 10vh;
width: 90%;
margin: auto;
align-items: center;
justify-content: space-between;
.theme-toggler {
display: flex;
h2 {
font-size: 12px;
align-self: flex-end;
margin-right: 1rem;
}
.label-container {
display: flex;
justify-content: space-evenly;
text-align: center;
.label {
margin: 0rem 0.35rem;
}
}
.input-container {
width: 60px;
height: 20px;
border-radius: 10px;
background: $keypad_toggle_Background;
display: flex;
align-items: center;
justify-content: space-evenly;
.input {
appearance: none;
background: $equal_toggle_KeyBackground;
width: 15px;
height: 15px;
border-radius: 50%;
opacity: 0;
cursor: pointer;
}
.input:checked {
opacity: 1;
}
// .input.active {
// opacity: 1;
// }
}
}
}
.screen {
min-height: 10vh;
width: 90%;
background: $screenBackground;
margin: auto;
border-radius: 10px;
}
.button-container {
min-height: 40vh;
width: 90%;
background: $keypad_toggle_Background;
border-radius: 10px;
margin: 1rem auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 1.5rem;
grid-gap: 1rem;
.button,
.reset,
.equal,
.delete {
border-radius: 10px;
outline: none;
border: none;
font-size: 1.4rem;
cursor: pointer;
background: $normalKeyBackground;
box-shadow: 0 5px $normalKeyShadow;
text-align: center;
}
// button {
// font: 400 13.3333px Arial;
// }
.reset,
.delete {
background: $removeKeyBackground;
box-shadow: 0 5px $removeKeyShadow;
}
.equal {
background: $equal_toggle_KeyBackground;
box-shadow: 0 5px $equalKeyShadow;
}
.reset,
.equal,
.delete {
color: $default;
}
.button {
color: $normalKeyText;
}
.reset {
grid-column: 1/3;
}
.equal {
grid-column: 3/5;
}
}
}_themes.sccs FILE
$mainBackground: hsl(222, 26%, 31%);
$keypad_toggle_Background: hsl(223, 31%, 20%);
$screenBackground: hsl(224, 36%, 15%);
$removeKeyBackground: hsl(225, 21%, 49%);
$removeKeyShadow: hsl(224, 28%, 35%);
$equal_toggle_KeyBackground: hsl(6, 63%, 50%);
$equalKeyShadow: hsl(6, 70%, 34%);
$normalKeyBackground: hsl(30, 25%, 89%);
$normalKeyShadow: hsl(28, 16%, 65%);
$normalKeyText: hsl(221, 14%, 31%);
$default: hsl(0, 0, 100%);
// .dark {
// $mainBackground: hsl(222, 26%, 31%);
// $keypad_toggle_Background: hsl(223, 31%, 20%);
// $screenBackground: hsl(224, 36%, 15%);
// $removeKeyBackground: hsl(225, 21%, 49%);
// $removeKeyShadow: hsl(224, 28%, 35%);
// $equal_toggle_KeyBackground: hsl(6, 63%, 50%);
// $equalKeyShadow: hsl(6, 70%, 34%);
// $normalKeyBackground: hsl(30, 25%, 89%);
// $normalKeyShadow: hsl(28, 16%, 65%);
// $normalKeyText: hsl(221, 14%, 31%);
// $default: hsl(0, 0, 100%);
// }
// .light {
// $mainBackground: hsl(0, 0%, 90%);
// $keypad_toggle_Background: hsl(0, 5%, 81%);
// $screenBackground: hsl(0, 0%, 93%);
// $removeKeyBackground: hsl(185, 42%, 37%);
// $removeKeyShadow: hsl(185, 58%, 25%);
// $equal_toggle_KeyBackground: hsl(25, 98%, 40%);
// $equalKeyShadow: hsl(25, 99%, 27%);
// $normalKeyBackground: hsl(45, 7%, 89%);
// $normalKeyShadow: hsl(35, 11%, 61%);
// $normalKeyText: hsl(60, 10%, 19%);
// $default: hsl(0, 0, 100%);
// }
// .saturated {
// }let input1 = document.getElementById("input1");
let input2 = document.getElementById("input2");
let input3 = document.getElementById("input3");
let main = document.getElementById("main");
input1.checked = true;
function setColorTheme() {
if (input1.checked == true) {
main.classList.add("dark");
} else {
main.classList.remove("dark");
}
if (input2.checked == true) {
main.classList.add("light");
} else {
main.classList.remove("light");
}
if (input3.checked == true) {
main.classList.add("saturated");
} else {
main.classList.remove("saturated");
}
}
setColorTheme();
document.querySelectorAll('input[name="theme"]').forEach((e) => {
e.addEventListener("change", setColorTheme);
});* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Spartan", sans-serif;
}
main {
background: #3a4764;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.calc-container {
min-height: 55vh;
width: 28%;
}
.calc-container header {
display: flex;
min-height: 10vh;
width: 90%;
margin: auto;
align-items: center;
justify-content: space-between;
}
.calc-container header .theme-toggler {
display: flex;
}
.calc-container header .theme-toggler h2 {
font-size: 12px;
align-self: flex-end;
margin-right: 1rem;
}
.calc-container header .theme-toggler .label-container {
display: flex;
justify-content: space-evenly;
text-align: center;
}
.calc-container header .theme-toggler .label-container .label {
margin: 0rem 0.35rem;
}
.calc-container header .theme-toggler .input-container {
width: 60px;
height: 20px;
border-radius: 10px;
background: #232c43;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.calc-container header .theme-toggler .input-container .input {
appearance: none;
background: #d03f2f;
width: 15px;
height: 15px;
border-radius: 50%;
opacity: 0;
cursor: pointer;
}
.calc-container header .theme-toggler .input-container .input:checked {
opacity: 1;
}
.calc-container .screen {
min-height: 10vh;
width: 90%;
background: #182034;
margin: auto;
border-radius: 10px;
}
.calc-container .button-container {
min-height: 40vh;
width: 90%;
background: #232c43;
border-radius: 10px;
margin: 1rem auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 1.5rem;
grid-gap: 1rem;
}
.calc-container .button-container .button,
.calc-container .button-container .reset,
.calc-container .button-container .equal,
.calc-container .button-container .delete {
border-radius: 10px;
outline: none;
border: none;
font-size: 1.4rem;
cursor: pointer;
background: #eae3dc;
box-shadow: 0 5px #b4a597;
text-align: center;
}
.calc-container .button-container .reset,
.calc-container .button-container .delete {
background: #637097;
box-shadow: 0 5px #404e72;
}
.calc-container .button-container .equal {
background: #d03f2f;
box-shadow: 0 5px #93261a;
}
.calc-container .button-container .reset,
.calc-container .button-container .equal,
.calc-container .button-container .delete {
color: white;
}
.calc-container .button-container .button {
color: #444b5a;
}
.calc-container .button-container .reset {
grid-column: 1/3;
}
.calc-container .button-container .equal {
grid-column: 3/5;
}
/*# sourceMappingURL=style.css.map */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="./css/style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Spartan:wght@700&display=swap"
rel="stylesheet"
/>
<script src="./script.js" defer></script>
<title>Frontend Mentor | Calculator app</title>
</head>
<body>
<main id="main">
<div class="calc-container">
<header>
<h1>calc</h1>
<div class="theme-toggler">
<h2>THEME</h2>
<div>
<div class="label-container">
<label for="input1" class="label">1</label>
<label for="input2" class="label">2</label>
<label for="input3" class="label">3</label>
</div>
<div class="input-container">
<input id="input1" class="input" type="radio" name="theme" />
<input id="input2" class="input" type="radio" name="theme" />
<input id="input3" class="input" type="radio" name="theme" />
</div>
</div>
</div>
</header>
<div class="screen">
<div class="screen-one">3232</div>
<div class="screen-two">dsa</div>
</div>
<div class="button-container">
<button class="button">7</button>
<button class="button">8</button>
<button class="button">9</button>
<button class="delete">DEL</button>
<button class="button">4</button>
<button class="button">5</button>
<button class="button">6</button>
<button class="button">+</button>
<button class="button">1</button>
<button class="button">2</button>
<button class="button">3</button>
<button class="button">-</button>
<button class="button">.</button>
<button class="button">0</button>
<button class="button">/</button>
<button class="button">X</button>
<button class="reset">RESET</button>
<button class="equal">=</button>
</div>
</div>
</main>
<!-- <script src="./script.js"></script> -->
</body>
</html>根据SCSS文档，块中定义的变量是本地的。https://sass-lang.com/documentation/variables#scope