使用数据属性重新定义 SCSS 变量

Question

So i need to make this calculator have specific themes 3 to be exact.所以我需要让这个计算器有特定的主题 3 确切地说。 I read some documentation and found a good way to do it with data atributes.我阅读了一些文档并找到了一种使用数据属性的好方法。 I goes as follows.我如下。 You define all the variables for a specific theme but only activatie them when a certain data atribute is present in the html tag.您为特定主题定义所有变量，但仅当 html 标记中存在特定数据属性时才激活它们。 If you change the data atribute the variables should now be redefined for that theme.如果您更改数据属性，现在应该为该主题重新定义变量。 Now ik know this works in CSS but it doesnt seam to work for SCSS.现在我知道这在 CSS 中有效，但它不适用于 SCSS。 maybe i am doing something wrong syntax related.也许我在做一些与语法相关的错误。

these are my SCSS variables.这些是我的 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%);
}

this is the HTML这是 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 tools

```
const themeSelectorBtn = document.getElementById('theme-selector-button');
let keypadBtns = Array.from(document.querySelectorAll('button'));
const display = document.querySelector('.display');
const app = document.querySelector('html')

themeSelectorBtn.addEventListener('input', () => {
  let currentValue = themeSelectorBtn.value;
  if(currentValue == 0){
    app.dataset.colorMode = 'theme-1';
  } else if(currentValue == 1) {
    app.dataset.colorMode = 'theme-2';
  } else {
    app.dataset.colorMode = 'theme-3';
  }
})
```
and the documentation i am trying to replicate contains this but in CSS instead of SCSS
```
:root {
    /* Theme 1 */
   /* Backgrounds */
   --main-bg-theme: hsl(222, 26%, 31%);
   --toggle-bg-theme: hsl(221, 38%, 25%);
   --btn-bg-theme: hsl(221, 35%, 19%);
   --screen-bg-theme: hsl(224, 36%, 15%);
   --top: white;

   /* Button */
   --btn-second-bg-theme: hsl(225, 21%, 49%);
   --btn-second-shadow-theme: hsl(223, 31%, 24%);
   --equals-theme: hsl(6, 63%, 50%);
   --btn-primary-bg-theme: hsl(30, 25%, 89%);
   --btn-primary-shadow-theme: hsl(28, 16%, 65%);

   /* Text */
   --text1-theme:  hsl(221, 14%, 31%);
   --text2-theme: hsl(0, 0, 100%);
   --equals: white;
   --display: hsl(0, 0, 100%);
   --equals-shadow:  hsl(6, 70%, 34%);

 }

 html[data-color-mode="theme2"] {
    /* Backgrounds */
   --main-bg-theme: hsl(0, 2%, 89%);
   --toggle-bg-theme: hsl(0, 12%, 82%);
   --btn-bg-theme: hsl(0, 12%, 82%);
   --screen-bg-theme: hsl(0, 0%, 100%);
   --top: black;

   /* Button */
   --btn-second-bg-theme: hsl(185, 42%, 37%);
   --btn-second-shadow-theme: hsl(185, 50%, 25%);
   --equals-theme: hsl(6, 63%, 50%);
   --btn-primary-bg-theme: hsl(45, 7%, 89%);
   --btn-primary-shadow-theme: hsl(35, 11%, 61%);

   /* Text */
   --text1-theme:  hsl(192, 12%, 8%);
   --text2-theme: hsl(0, 0, 100%);
   --equals: white;
   --display: black;
   --equals-shadow:  hsl(6, 70%, 34%);
 }

 
 html[data-color-mode="theme3"] {
   /* Backgrounds */
   --main-bg-theme: hsl(268, 75%, 9%);
   --toggle-bg-theme: hsl(268, 74%, 20%);
   --btn-bg-theme: hsl(268, 74%, 20%);
   --screen-bg-theme: hsl(268, 74%, 20%);
   --top: hsl(54, 63%, 75%);

   /* Button */
   --btn-second-bg-theme: hsl(281, 89%, 26%);
   --btn-second-shadow-theme: hsl(290, 69%, 43%);
   --equals-theme: hsl(177, 92%, 70%);
   --btn-primary-bg-theme: hsl(281, 71%, 21%);
   --btn-primary-shadow-theme: hsl(290, 70%, 36%);

   /* Text */
   --text1-theme:  hsl(54, 63%, 75%);
   --text2-theme: hsl(0, 0, 100%);
   --equals: black;
   --display: hsl(54, 63%, 75%);
   --equals-shadow:  hsl(189, 69%, 43%);
}

```

Answer 1

So it turns out i made a silly mistake.所以事实证明我犯了一个愚蠢的错误。 I put a - in between colorMode in the HTML file.我在 HTML 文件中的 colorMode 之间放了一个 - 。 It works fine now.它现在工作正常。

使用数据属性重新定义 SCSS 变量

问题描述

1 个解决方案

解决方案1
0 2022-01-20 19:22:09

使用数据属性重新定义 SCSS 变量

问题描述

1 个解决方案

解决方案1 0 2022-01-20 19:22:09

解决方案1
0 2022-01-20 19:22:09