用数据分布重新定义SCSS变量
因此，我需要使这个计算器有具体的主题3，准确地说。我阅读了一些文档，并找到了一种使用数据分布的好方法。我的看法如下。您定义了特定主题的所有变量，但只有在html标记中存在某个数据属性时才激活它们。如果您更改了数据分布，那么现在应该为该主题重新定义变量。现在ik知道这在CSS中有效，但是它不适合SCSS工作。也许我做了一些错误的语法相关的事情。
这些是我的SCSS变量。
// Typography
$main-Font: 'Spartan',
sans-serif;
// Theme 1
$background: hsl(222, 26%, 31%);
$keypadColor: hsl(223, 31%, 20%);
$ScreenColor: hsl(224, 36%, 15%);
$tertiaryKeyColor: hsl(225, 21%, 49%);
$tertiaryKeyColorShadow: hsl(224, 28%, 35%);
$secondaryKeyColor: hsl(6, 63%, 50%);
$secondaryKeyColorShadow: hsl(6, 70%, 34%);
$basicKeyColor: hsl(30, 25%, 89%);
$basicKeyColorShadow: hsl(28, 16%, 65%);
$text1: hsl(221, 14%, 31%);
$text2: hsl(0, 0, 100%);
$text3: hsl(0, 0, 100%);
html[data-color-mode="theme-2"] {
// Theme 2
$background: hsl(0, 0%, 90%);
$keypadColor: hsl(0, 5%, 81%);
$ScreenColor: hsl(0, 0%, 93%);
$tertiaryKeyColor: hsl(185, 42%, 37%);
$tertiaryKeyColorShadow: hsl(185, 58%, 25%);
$secondaryKeyColor: hsl(25, 98%, 40%);
$secondaryKeyColorShadow: hsl(25, 99%, 27%);
$basicKeyColor: hsl(45, 7%, 89%);
$basicKeyColorShadow: hsl(35, 11%, 61%);
$text1: hsl(60, 10%, 19%);
$text2: hsl(0, 0, 100%);
$text3: hsl(0, 0, 100%);
}
html[data-color-mode="theme-3"]{
// Theme 3
$background: hsl(268, 75%, 9%);
$keypadColor: hsl(268, 71%, 12%);
$ScreenColor: hsl(268, 71%, 12%);
$tertiaryKeyColor: hsl(281, 89%, 26%);
$tertiaryKeyColorShadow: hsl(285, 91%, 52%);
$ScreenColor: hsl(176, 100%, 44%);
$secondaryKeyColorShadow: hsl(177, 92%, 70%);
$basicKeyColor: hsl(268, 47%, 21%);
$basicKeyColorShadow: hsl(290, 70%, 36%);
$text1: hsl(52, 100%, 62%);
$text2: hsl(0, 0, 100%);
$text3: hsl(198, 20%, 13%);
}这是HTML
<!DOCTYPE html>
<html lang="en" data-color-mode="theme-1">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<title>Frontend Mentor | Calculator app</title>
<!-- stylesheet link -->
<link rel="stylesheet" href="./css/index.css">
<!-- Js link -->
<script src="./js/app.js" defer></script>
</head>
<body>
<div class="calculator-container">
<header class="flex">
<h2>Calc</h2>
<div class="toggle-button-container">
<h3>theme</h3>
<input type="range" max="2" value="0" name="theme-selector" id="theme-selector-button">
</div>
</header>
<div class="display">
</div>
<main class="keypad grid">
<button>7</button>
<button>8</button>
<button>9</button>
<button class="tertiary-color">DEL</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>+</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>-</button>
<button>.</button>
<button>0</button>
<button>/</button>
<button>x</button>
<button class="col-span tertiary-color">RESET</button>
<button class="col-span secondary-color">=</button>
</main>
</div>
</body>
</html>
and this function changes the data atribute. Now this part works because i can see the atribute change in the dev toolsconst themeSelectorBtn =themeSelectorBtn
设keypadBtns =keypadBtns
const = document.querySelector('.display')；
const = document.querySelector('html')
ThemeSelectorBtn.addEventListener(输入)，() => {
设currentValue = themeSelectorBtn.value；
if(currentValue == 0){
app.dataset.colorMode = 'theme-1';}否则if(currentValue == 1) {
app.dataset.colorMode = 'theme-2';}否则{
app.dataset.colorMode = 'theme-3';}
})
and the documentation i am trying to replicate contains this but in CSS instead of SCSS根{
/* Theme 1 *//背景/
-主要--bg-主题: hsl(222，26%，31%)；
-切换-bg-主题: hsl(221，38%，25%)；
-btn-bg-主题: hsl(221，35%，19%)；
-屏幕-bg-主题: hsl(224，36%，15%)；
-顶部:白色；
/ Button /
-btn-第二阶段-bg-主题: hsl(225，21%，49%)；
-btn-第二个影子主题: hsl(223，31%，24%)；
-平等-主题: hsl(6，63%，50%)；
-btn-小学-bg-主题: hsl(30，25%，89%)；
-btn-初级-影子-主题: hsl(28，16%，65%)；
/案文/
-主题1: hsl(221，14%，31%)；
-text2 2-主题: hsl(0，0,100%)；
-平等:白人；
-显示: hsl(0，0,100%)；
-等于-影子: hsl(6，70%，34%)；
}
htmldata-color-mode="theme2“{
/* Backgrounds */-主要--bg-主题: hsl(0，2%，89%)；
-切换-bg-主题: hsl(0，12%，82%)；
-btn-bg-主题: hsl(0，12%，82%)；
-屏幕-bg-主题: hsl(0，0%，100%)；
-顶部:黑色；
/ Button /
-btn-第二阶段-bg-主题: hsl(185，42%，37%)；
-btn-第二个影子-主题: hsl(185，50%，25%)；
-平等-主题: hsl(6，63%，50%)；
-btn-小学-bg-主题: hsl(45，7%，89%)；
-btn-初级-影子-主题: hsl(35，11%，61%)；
/案文/
-主题1: hsl(192，12%，8%)；
-text2 2-主题: hsl(0，0,100%)；
-平等:白人；
-展示:黑色；
-等于-影子: hsl(6，70%，34%)；
}
htmldata-color-mode="theme3“{
/背景/
-主要--bg-主题: hsl(268，75%，9%)；
-切换-bg-主题: hsl(268，74%，20%)；
-btn-bg-主题: hsl(268，74%，20%)；
-屏幕-bg-主题: hsl(268，74%，20%)；
-最高水平: hsl(54 %，63%，75%)；
/ Button /
-btn-第二阶段-bg-主题: hsl(281，89%，26%)；
-btn-第二个影子主题: hsl(290，69%，43%)；
-平等-主题: hsl(177，92%，70%)；
-btn-小学-bg-主题: hsl(281，71%，21%)；
-btn-初级-影子-主题: hsl(290，70%，36%)；
/案文/
-主题1: hsl(54，63%，75%)；
-text2 2-主题: hsl(0，0,100%)；
-平等:黑人；
-显示: hsl(54，63%，75%)；
-平等-影子: hsl(189，69%，43%)；
}
回答 1
Stack Overflow用户
发布于 2022-01-20 19:22:09
结果我犯了个愚蠢的错误。我在colorMode文件中插入了一个.现在很好用。
https://stackoverflow.com/questions/70792118
复制相似问题
腾讯云开发者
